/* ===================================================================== DIMPROTECH - Design System premium (inspiré Notion / Linear / ClickUp) Mobile First. Thème clair/sombre via variables CSS. ===================================================================== */ /* ---------- Thème : variables ---------- */ :root { --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Couleurs - clair (thème pro "informatique / SaaS", base bleue) */ --bg: #ffffff; --bg-subtle: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0; --border-strong:#cbd5e1; --text: #1e293b; --text-muted: #64748b; --text-faint: #94a3b8; --accent: #2563eb; --accent-hover: #1e40af; --accent-light: #60a5fa; --accent-soft: #dbeafe; --accent-text: #ffffff; --green: #16a34a; --green-soft:#dcfce7; --amber: #d97706; --amber-soft:#fef3c7; --red: #dc2626; --red-soft: #fee2e2; --blue: #2563eb; --blue-soft: #dbeafe; --shadow-sm: 0 1px 2px rgba(16,18,29,.06), 0 1px 3px rgba(16,18,29,.04); --shadow-md: 0 4px 12px rgba(16,18,29,.08), 0 2px 4px rgba(16,18,29,.04); --shadow-lg: 0 12px 32px rgba(16,18,29,.14), 0 4px 8px rgba(16,18,29,.06); --radius: 10px; --radius-lg: 16px; --radius-sm: 7px; --sidebar-w: 248px; --topbar-h: 60px; --transition: 160ms cubic-bezier(.4,0,.2,1); } :root[data-theme='dark'] { --bg: #0b1220; --bg-subtle: #0f172a; --surface: #111c30; --surface-2: #1e293b; --border: #24324a; --border-strong:#334155; --text: #e2e8f0; --text-muted: #94a3b8; --text-faint: #64748b; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-light: #60a5fa; --accent-soft: #16294d; --accent-text: #ffffff; --green: #4ade80; --green-soft:#0e2a1b; --amber: #fbbf24; --amber-soft:#2c2208; --red: #f87171; --red-soft: #2c1416; --blue: #60a5fa; --blue-soft: #16294d; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 16px 40px rgba(0,0,0,.6); } /* ===================================================================== THÈMES DE COULEUR (accent) — sélectionnables dans les Paramètres. Fonctionnent en mode clair ET sombre. data-accent posé sur . « blue » = défaut (déjà défini dans :root), aucune règle nécessaire. ===================================================================== */ /* --- Mode clair --- */ :root[data-accent='violet'] { --accent:#7c3aed; --accent-hover:#6d28d9; --accent-light:#a78bfa; --accent-soft:#ede9fe; } :root[data-accent='emerald'] { --accent:#059669; --accent-hover:#047857; --accent-light:#34d399; --accent-soft:#d1fae5; } :root[data-accent='amber'] { --accent:#ea580c; --accent-hover:#c2410c; --accent-light:#fb923c; --accent-soft:#ffedd5; } :root[data-accent='rose'] { --accent:#e11d48; --accent-hover:#be123c; --accent-light:#fb7185; --accent-soft:#ffe4e6; } :root[data-accent='slate'] { --accent:#475569; --accent-hover:#334155; --accent-light:#94a3b8; --accent-soft:#e2e8f0; } /* --- Mode sombre (teintes plus vives + soft foncé) --- */ :root[data-theme='dark'][data-accent='violet'] { --accent:#8b5cf6; --accent-hover:#a78bfa; --accent-light:#a78bfa; --accent-soft:#2a1d4d; } :root[data-theme='dark'][data-accent='emerald'] { --accent:#10b981; --accent-hover:#34d399; --accent-light:#34d399; --accent-soft:#06281f; } :root[data-theme='dark'][data-accent='amber'] { --accent:#f97316; --accent-hover:#fb923c; --accent-light:#fb923c; --accent-soft:#3a1e08; } :root[data-theme='dark'][data-accent='rose'] { --accent:#f43f5e; --accent-hover:#fb7185; --accent-light:#fb7185; --accent-soft:#3d1320; } :root[data-theme='dark'][data-accent='slate'] { --accent:#64748b; --accent-hover:#94a3b8; --accent-light:#94a3b8; --accent-soft:#1e293b; } /* ===================================================================== AMBIANCES COMPLÈTES (presets) — inspirées de Discord / ChatGPT / Claude. Elles redéfinissent toute la palette (fond, surfaces, texte, accent). Placées après les règles d'accent : elles sont autonomes. ===================================================================== */ :root[data-theme='discord'] { --bg:#2b2d31; --bg-subtle:#1e1f22; --surface:#313338; --surface-2:#383a40; --border:#26282c; --border-strong:#3f4147; --text:#f2f3f5; --text-muted:#b5bac1; --text-faint:#80848e; --accent:#5865f2; --accent-hover:#4752c4; --accent-light:#7984f5; --accent-soft:#3a3d63; --accent-text:#ffffff; --green:#3ba55d; --green-soft:#1c3326; --amber:#faa61a; --amber-soft:#3a2e10; --red:#ed4245; --red-soft:#3a1e1f; --blue:#5865f2; --blue-soft:#2e2f54; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6); } :root[data-theme='chatgpt'] { --bg:#171717; --bg-subtle:#212121; --surface:#2f2f2f; --surface-2:#373737; --border:#3a3a3a; --border-strong:#4a4a4a; --text:#ececec; --text-muted:#b4b4b4; --text-faint:#8e8e8e; --accent:#10a37f; --accent-hover:#0e8f6f; --accent-light:#19c39a; --accent-soft:#10342b; --accent-text:#ffffff; --green:#19c37d; --green-soft:#0f2f23; --amber:#e3a008; --amber-soft:#33280a; --red:#ef4146; --red-soft:#331a1b; --blue:#3b82f6; --blue-soft:#16243d; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6); } :root[data-theme='claude'] { --bg:#f0eee6; --bg-subtle:#faf9f5; --surface:#ffffff; --surface-2:#f2f0e8; --border:#e6e3da; --border-strong:#d4d0c4; --text:#2b2a27; --text-muted:#6b6a63; --text-faint:#9a988f; --accent:#d97757; --accent-hover:#c2613f; --accent-light:#e3a085; --accent-soft:#f5e6df; --accent-text:#ffffff; --green:#16a34a; --green-soft:#e3f3e8; --amber:#c2840a; --amber-soft:#f6ecd6; --red:#dc2626; --red-soft:#f8e2e2; --blue:#2f6fb0; --blue-soft:#e2ecf6; --shadow-sm:0 1px 2px rgba(70,60,40,.06),0 1px 3px rgba(70,60,40,.04); --shadow-md:0 4px 12px rgba(70,60,40,.09),0 2px 4px rgba(70,60,40,.05); --shadow-lg:0 12px 32px rgba(70,60,40,.14),0 4px 8px rgba(70,60,40,.07); } /* ===================================================================== COULEUR DU TEXTE forcée (surcouche) — par-dessus tout thème. Placée après les ambiances pour bien remplacer leur --text. ===================================================================== */ :root[data-text='blue'] { --text:#2563eb; } :root[data-text='violet'] { --text:#7c3aed; } :root[data-text='emerald'] { --text:#059669; } :root[data-text='amber'] { --text:#ea580c; } :root[data-text='rose'] { --text:#e11d48; } :root[data-text='slate'] { --text:#475569; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg-subtle); color: var(--text); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } ::selection { background: var(--accent-soft); } /* Scrollbar discrète */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; } /* ===================================================================== STRUCTURE ===================================================================== */ .app { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { width: var(--sidebar-w); background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; transition: transform var(--transition); } .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; } .brand-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-light)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; box-shadow: var(--shadow-sm); } .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.2px; } .brand-name span { color: var(--accent); } .nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .nav-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); padding: 14px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; transition: background var(--transition), color var(--transition); } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-badge { margin-left: auto; background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; } .nav-item.active .nav-badge { background: var(--accent); color: #fff; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-faint); text-align: center; } /* ---------- Zone principale ---------- */ .main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; } /* ---------- Top bar ---------- */ .topbar { height: var(--topbar-h); position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 18px; } .menu-btn { display: none; width: 38px; height: 38px; border-radius: var(--radius-sm); } .menu-btn:hover { background: var(--surface-2); } .menu-btn svg { width: 22px; height: 22px; } .search-wrap { position: relative; flex: 1; max-width: 560px; } .search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; } .search-input { width: 100%; height: 40px; padding: 0 14px 0 38px; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius); transition: var(--transition); } .search-input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--text-muted); transition: var(--transition); } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn svg { width: 20px; height: 20px; } /* ---------- Contenu / vue ---------- */ .view { padding: 24px; max-width: 1180px; width: 100%; margin: 0 auto; } .page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .page-title { font-size: 24px; font-weight: 700; letter-spacing: -.4px; } .page-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 2px; } .page-head .spacer { flex: 1; } /* ===================================================================== COMPOSANTS ===================================================================== */ /* Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--radius); font-weight: 600; font-size: 14px; white-space: nowrap; transition: var(--transition); border: 1px solid transparent; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn-subtle { background: var(--surface-2); color: var(--text); } .btn-subtle:hover { background: var(--border); } .btn-danger { background: var(--red-soft); color: var(--red); } .btn-sm { height: 34px; padding: 0 12px; font-size: 13px; } .btn-block { width: 100%; } /* Cartes */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-pad { padding: 18px; } /* Grille de stats */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); } .stat-val { font-size: 28px; font-weight: 750; letter-spacing: -.5px; line-height: 1.1; } .stat-label { color: var(--text-muted); font-size: 12.5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; } .stat-label svg { width: 15px; height: 15px; } /* Cartes cliquables */ a.stat { display: block; transition: var(--transition); } a.stat:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); } a.stat:hover .stat-val { color: var(--accent); } /* Versions compactes (tableau de bord) */ .stats-compact { gap: 12px; margin-bottom: 4px; } .stats-compact .stat { padding: 12px 14px; } .stats-compact .stat-val { font-size: 22px; } .dash-compact .list-row { padding: 9px 14px; } .dash-compact .appt { padding: 9px 12px; margin-bottom: 6px; } /* Sections (titres) */ .section-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; } .section-head > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); } .section-head h2 { font-size: 16px; font-weight: 650; letter-spacing: -.2px; } .section-head .count { color: var(--text-faint); font-weight: 500; } .section-head .spacer { flex: 1; } /* Grille dashboard */ .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Liste générique */ .list { display: flex; flex-direction: column; } .list-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px solid var(--border); border-top: none; background: var(--surface); transition: background var(--transition); } .list-row:first-child { border-top: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .list-row:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .list-row:only-child { border-radius: var(--radius-lg); } .list-row:hover { background: var(--surface-2); cursor: pointer; } .avatar { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--accent-soft); color: var(--accent); } .avatar.pro { background: var(--blue-soft); color: var(--blue); border-radius: 9px; } .row-main { min-width: 0; flex: 1; } .row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-sub { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .row-meta { color: var(--text-faint); font-size: 12px; text-align: right; flex-shrink: 0; } /* Badges / chips */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-muted); } .chip.accent { background: var(--accent-soft); color: var(--accent); } .chip.green { background: var(--green-soft); color: var(--green); } .chip.amber { background: var(--amber-soft); color: var(--amber); } .chip.red { background: var(--red-soft); color: var(--red); } .chip.blue { background: var(--blue-soft); color: var(--blue); } /* Actions rapides (Appeler, SMS, GPS) */ .quick-actions { display: flex; gap: 10px; flex-wrap: wrap; } .quick-action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--radius); font-weight: 600; font-size: 13.5px; border: 1px solid var(--border); background: var(--surface); transition: var(--transition); } .quick-action:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); } .quick-action svg { width: 17px; height: 17px; } .quick-action.call { color: var(--green); } .quick-action.sms { color: var(--blue); } .quick-action.gps { color: var(--amber); } /* Onglets */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 20px 0 18px; overflow-x: auto; } .tab { padding: 10px 14px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: var(--transition); } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab .count { font-size: 11px; background: var(--surface-2); padding: 1px 6px; border-radius: 10px; margin-left: 5px; } /* Timeline événements */ .timeline { position: relative; padding-left: 26px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border); } .tl-item { position: relative; padding: 0 0 18px; } .tl-dot { position: absolute; left: -25px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); } .tl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); } .tl-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .tl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .tl-time { color: var(--text-faint); font-size: 12px; margin-left: auto; } .tl-body { color: var(--text-muted); font-size: 13px; white-space: pre-wrap; } /* Galerie */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; transition: var(--transition); } .gallery img:hover { transform: scale(1.02); box-shadow: var(--shadow-md); } /* Pièces jointes (aperçu + bouton retirer) */ .att-thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .att-thumb img { width: 100%; height: 100%; object-fit: cover; } .att-thumb.staged { border: 2px dashed var(--accent); } .att-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(15,23,42,.78); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; display: grid; place-items: center; transition: var(--transition); } .att-x:hover { background: var(--red); } .att-badge { position: absolute; bottom: 4px; left: 4px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; } .att-add { aspect-ratio: 1; border: 2px dashed var(--border-strong); border-radius: var(--radius); display: grid; place-items: center; font-size: 28px; color: var(--text-faint); cursor: pointer; transition: var(--transition); } .att-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* Formulaires */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .input, .select, .textarea { height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: var(--transition); width: 100%; } .textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Lignes de devis / facture */ .inv-line { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); } .inv-line input, .inv-line select { height: 36px; padding: 0 8px; } .inv-line input[type="radio"] { height: auto; width: auto; padding: 0; margin: 0; accent-color: var(--accent); } .inv-line-kind { display: flex; gap: 18px; flex-wrap: wrap; } .inv-line-kind .lk { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; } .inv-line-main { display: flex; gap: 8px; align-items: center; } .inv-line-main .line-label { flex: 1; font-weight: 600; } .inv-line-main .btn { height: 34px; flex-shrink: 0; } .inv-line .line-desc { font-size: 13px; } .inv-line-nums { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .inv-line-nums label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-muted); font-weight: 600; } .inv-line-nums .line-kind { width: 130px; } .inv-line-nums .line-qty { width: 64px; } .inv-line-nums .line-pu { width: 92px; } .inv-line-nums .line-tva { width: 80px; } .inv-line-nums .line-total { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; align-self: center; } /* Récap par type (main d'œuvre / biens) — aide à l'édition, à gauche des totaux */ .inv-summary { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .inv-cat-totals { flex: 1 1 200px; max-width: 280px; align-self: flex-end; } .inv-cat-totals:empty { display: none; } .inv-cat-totals .inv-cat-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); margin-bottom: 6px; } .inv-cat-totals > div:not(.inv-cat-title) { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--text-muted); } .inv-cat-totals strong { color: var(--text); font-variant-numeric: tabular-nums; } .inv-totals { margin-top: 0; } .inv-notes { margin-top: 16px; max-width: 440px; } .inv-totals { margin: 16px 0 0 auto; max-width: 280px; } .inv-totals > div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-muted); } .inv-totals strong { color: var(--text); font-variant-numeric: tabular-nums; } .inv-totals .ttc { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-size: 17px; } .inv-totals .ttc strong { color: var(--accent); } /* Segmented control */ .segmented { display: inline-flex; background: var(--surface-2); border-radius: var(--radius); padding: 3px; gap: 3px; } .segmented button { padding: 7px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; color: var(--text-muted); transition: var(--transition); } .segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } /* État vide */ .empty { text-align: center; padding: 48px 20px; color: var(--text-muted); } .empty svg { width: 44px; height: 44px; color: var(--text-faint); margin-bottom: 12px; } .empty h3 { font-size: 16px; color: var(--text); margin-bottom: 4px; } /* ===================================================================== MODALE ===================================================================== */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,12,18,.5); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal { background: var(--bg); width: 100%; max-width: 560px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); max-height: 92vh; display: flex; flex-direction: column; transform: translateY(20px); transition: transform var(--transition); } .modal-overlay.open .modal { transform: translateY(0); } .modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .modal-head h2 { font-size: 17px; font-weight: 700; } .modal-head .icon-btn { margin-left: auto; } .modal-body { padding: 20px; overflow-y: auto; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* Grande fenêtre (ex. éditeur de devis/facture) */ .modal-wide { max-width: 900px; } /* Sur PC : TOUTES les fenêtres sont centrées (plus collées en bas) et arrondies. Sur mobile (≤760px) elles restent en feuille remontant du bas. */ @media (min-width: 761px) { .modal-overlay { align-items: center; padding: 24px; } /* Animation d'apparition « pop » (zoom + fondu, léger rebond) */ .modal { border-radius: var(--radius-lg); max-height: 90vh; transform: scale(.92); opacity: 0; transition: transform 240ms cubic-bezier(.34, 1.56, .64, 1), opacity 160ms ease; } .modal-overlay.open .modal { transform: scale(1); opacity: 1; } /* Éditeur de devis : les 4 champs courts (date, validité, TVA, statut) sur une rangée */ .modal-wide .form-grid { grid-template-columns: repeat(4, 1fr); } .modal-wide .form-grid .field.full { grid-column: 1 / -1; } } /* Respecte la préférence « réduire les animations » */ @media (prefers-reduced-motion: reduce) { .modal { transition: none !important; } } /* Toast moderne (haut-droite, barre de progression) */ .toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; max-width: calc(100vw - 32px); } .toast { position: relative; overflow: hidden; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: var(--radius); font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 360px; animation: toastIn .3s cubic-bezier(.16,1,.3,1); } .toast.out { animation: toastOut .25s forwards; } .toast .toast-ic { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; } .toast .toast-ic svg { width: 13px; height: 13px; } .toast.success { border-left-color: var(--green); } .toast.success .toast-ic { background: var(--green); } .toast.error { border-left-color: var(--red); } .toast.error .toast-ic { background: var(--red); } .toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; animation: toastBar linear forwards; } .toast.success .toast-bar { background: var(--green); } .toast.error .toast-bar { background: var(--red); } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { to { opacity: 0; transform: translateX(40px); } } @keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 760px) { .toast-wrap { left: 16px; align-items: stretch; } .toast { max-width: none; } } /* Spinner */ .loading { display: grid; place-items: center; padding: 60px; } .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Agenda */ .agenda-day { margin-bottom: 18px; } .agenda-date { font-weight: 700; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .agenda-date.today { color: var(--accent); } .appt { display: flex; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; cursor: pointer; transition: var(--transition); } .appt:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); } .appt-time { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 48px; } /* Cases à cocher (tâches) */ .check { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; transition: var(--transition); } .check:hover { border-color: var(--accent); } .check.done { background: var(--accent); border-color: var(--accent); } .check.done svg { width: 13px; height: 13px; color: #fff; } .task-done .row-title { text-decoration: line-through; color: var(--text-faint); } /* FAB (mobile) */ .fab { display: none; } /* ===================================================================== RESPONSIVE (Mobile First : on adapte vers le bas) ===================================================================== */ @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { :root { --topbar-h: 56px; } .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .menu-btn { display: grid; place-items: center; } .view { padding: 16px; padding-bottom: 90px; } .form-grid { grid-template-columns: 1fr; } .page-title { font-size: 20px; } /* Overlay quand sidebar ouverte */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39; opacity: 0; pointer-events: none; transition: var(--transition); } .scrim.show { opacity: 1; pointer-events: auto; } .modal { max-width: 100%; } /* FAB nouvel appel entrant */ .fab { display: flex; align-items: center; justify-content: center; gap: 8px; position: fixed; bottom: 18px; right: 18px; z-index: 35; height: 52px; padding: 0 20px; border-radius: 26px; background: var(--accent); color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); } .fab svg { width: 22px; height: 22px; } } @media (min-width: 761px) { .scrim { display: none; } } /* ===================== CGV (Conditions Générales de Vente) ===================== */ .cgv-doc { max-width: 820px; } .cgv-doc-title { font-size: 19px; font-weight: 800; color: var(--accent); margin: 0 0 18px; letter-spacing: .2px; } .cgv-doc .cgv-h { font-size: 15px; font-weight: 700; color: var(--text); margin: 22px 0 6px; } .cgv-doc .cgv-p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 10px; } /* ===================== Sélecteur de thème de couleur ===================== */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .theme-swatch { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--transition); } .theme-swatch:hover { border-color: var(--border-strong); background: var(--surface-2); } .theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .theme-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } /* ===================== Sélecteur d'ambiance (thème complet) ===================== */ .ambiance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .ambiance-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); cursor: pointer; transition: var(--transition); text-align: center; } .ambiance-card:hover { border-color: var(--border-strong); } .ambiance-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ambiance-preview { position: relative; height: 56px; border-radius: var(--radius); border: 1px solid var(--border); display: block; overflow: hidden; } .ambiance-dot { position: absolute; right: 9px; bottom: 9px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.5), inset 0 0 0 1px rgba(0,0,0,.1); } .ambiance-label { font-weight: 650; font-size: 14px; } .ambiance-note { font-size: 11.5px; color: var(--text-faint); margin-top: -4px; } /* Pastille « Par défaut » de la couleur du texte (montre la couleur courante du thème) */ .theme-dot.dot-default { box-shadow: inset 0 0 0 1px rgba(127,127,127,.5); border: 2px dashed var(--border-strong); } /* ===================== Raccourcis du tableau de bord ===================== */ .shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .shortcut { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13.5px; transition: var(--transition); cursor: pointer; } .shortcut:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .shortcut svg { width: 22px; height: 22px; } /* ==================================================================== Écran de connexion / création de mot de passe (plein écran) ==================================================================== */ .auth-screen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; /* défilement si le contenu dépasse l'écran */ -webkit-overflow-scrolling: touch; background: var(--bg-subtle); background-image: radial-gradient(120% 120% at 50% 0%, var(--accent-soft) 0%, var(--bg-subtle) 55%); } .auth-layout { display: flex; align-items: stretch; gap: 18px; width: 100%; max-width: 760px; margin: auto; /* centré si ça rentre, haut accessible si ça déborde */ } .auth-card { flex: 1 1 0; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 26px 26px; text-align: center; } /* Panneau descriptif (à droite sur PC, en dessous sur mobile) */ .auth-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; background: var(--accent); color: var(--accent-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px 28px; text-align: left; } .auth-info .auth-tagline { color: var(--accent-text); opacity: .9; margin: 0 0 10px; } .auth-info-title { font-size: 21px; font-weight: 800; margin: 0 0 16px; line-height: 1.25; } .auth-info-foot { margin-top: 20px; font-size: 12px; opacity: .85; } /* Empilement sur téléphone : formulaire en haut, descriptif en bas */ @media (max-width: 640px) { .auth-layout { flex-direction: column; max-width: 400px; } .auth-info { text-align: center; padding: 22px 20px; } .auth-info .auth-feats { display: inline-flex; } } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; } .auth-lock { width: 52px; height: 52px; margin: 4px auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .auth-lock svg { width: 26px; height: 26px; } .auth-tagline { font-size: 12.5px; font-weight: 600; margin: 0 0 12px; letter-spacing: .2px; } .auth-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--text); } .auth-sub { font-size: 13.5px; color: var(--text-muted); margin: 0 0 4px; line-height: 1.45; } .auth-feats { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 9px; } .auth-feats li { font-size: 14px; color: inherit; padding-left: 22px; position: relative; } .auth-feats li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; } .auth-form { display: flex; flex-direction: column; gap: 6px; text-align: left; } .auth-form label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-top: 8px; } .auth-submit { margin-top: 18px; width: 100%; justify-content: center; padding: 11px; font-size: 15px; } .auth-foot { margin-top: 18px; font-size: 11.5px; color: var(--text-faint); } /* Client sélectionné dans le formulaire de rendez-vous */ .appt-picked { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 8px 10px; } .appt-picked .list-row { background: transparent; border: 0; padding: 0; } /* Barre de filtres / tri (liste clients) */ .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .filter-bar .select { flex: 1 1 150px; min-width: 130px; max-width: 220px; } .filter-bar .btn { flex: 0 0 auto; } @media (max-width: 560px) { .filter-bar .select { flex: 1 1 calc(50% - 4px); max-width: none; } } /* ==================================================================== Statuts de rendez-vous (agenda) — couleurs douces, non agressives ==================================================================== */ .appt.st-reschedule { background: var(--amber-soft); border-color: var(--amber); } .appt.st-moved { background: var(--blue-soft); border-color: var(--blue); } .appt.st-done { background: var(--green-soft); border-color: var(--green); } .appt.st-cancelled { opacity: .6; } .appt.st-cancelled .row-title { text-decoration: line-through; } .appt .chip { align-self: center; } /* Sélecteur de statut dans le menu d'actions du RDV */ .field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; } .status-grid { display: flex; flex-wrap: wrap; gap: 8px; } .status-pick { flex: 1 1 calc(50% - 4px); min-width: 120px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: var(--transition); text-align: center; } .status-pick:hover { border-color: var(--accent); } .status-pick.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; } /* Aperçu de la couleur du statut sur chaque bouton */ .status-pick.st-reschedule { background: var(--amber-soft); border-color: var(--amber); } .status-pick.st-moved { background: var(--blue-soft); border-color: var(--blue); } .status-pick.st-done { background: var(--green-soft); border-color: var(--green); } .status-pick.st-cancelled { color: var(--text-muted); text-decoration: line-through; } /* Bloc Rendez-vous dans la fiche d'événement */ .rdv-info { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rdv-info .chip { margin-left: auto; } .rdv-log { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; } .rdv-log-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-muted); } .rdv-log-when { color: var(--text-faint); white-space: nowrap; } /* ==================================================================== Cloche de notifications + suivi de consultation ==================================================================== */ .bell-btn { position: relative; } .bell-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 10px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .notif-panel { position: fixed; top: 58px; right: 14px; z-index: 150; width: 340px; max-width: calc(100vw - 24px); max-height: 72vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .notif-list { padding: 6px; } .notif-item { padding: 10px; border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: var(--accent-soft); } .notif-title { font-weight: 600; font-size: 13.5px; } .notif-body { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .notif-time { font-size: 11px; color: var(--text-faint); margin-top: 3px; } .notif-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 13px; } .inv-viewed { margin: 4px 0 12px; padding: 8px 12px; background: var(--green-soft); color: var(--green); border-radius: var(--radius); font-size: 13px; font-weight: 600; } /* ==================================================================== Galerie groupée par date + Visionneuse plein écran (lightbox) ==================================================================== */ .gallery-group { margin-bottom: 18px; } .gallery-date { font-weight: 700; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(8,10,16,.93); backdrop-filter: blur(2px); display: flex; flex-direction: column; padding: 16px; } .lb-close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; } .lb-close:hover { background: rgba(255,255,255,.26); } .lb-body { flex: 1; display: flex; gap: 16px; min-height: 0; } .lb-info { width: 250px; flex-shrink: 0; overflow-y: auto; color: #e7eaf0; background: rgba(255,255,255,.05); border-radius: var(--radius-lg); padding: 18px; } .lb-info-head h3 { margin: 8px 0 0; font-size: 16px; color: #fff; line-height: 1.3; } .lb-date { color: #aeb6c4; font-size: 13px; margin-top: 8px; } .lb-count { color: #8b94a6; font-size: 12px; margin-top: 4px; } .lb-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .lb-actions .btn { justify-content: center; } .lb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; } .lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; } .lb-nav:hover { background: rgba(255,255,255,.3); } .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 4px 2px; flex-shrink: 0; } .lb-strip img { height: 62px; width: 62px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .5; border: 2px solid transparent; flex-shrink: 0; transition: var(--transition); } .lb-strip img:hover { opacity: .85; } .lb-strip img.active { opacity: 1; border-color: var(--accent); } @media (max-width: 680px) { .lb-body { flex-direction: column; } .lb-stage { order: 1; min-height: 0; } .lb-info { order: 2; width: auto; max-height: 28vh; } } /* Bloc de partage des photos (fiche événement) */ .share-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); } .share-on { font-weight: 600; color: var(--green); font-size: 13.5px; margin-bottom: 8px; } .share-url { display: flex; gap: 8px; margin-bottom: 10px; } .share-url .input { flex: 1; font-size: 12.5px; } /* Réglage in-app « Réduire les animations » (data-reduce-motion sur ) */ :root[data-reduce-motion='1'] *, :root[data-reduce-motion='1'] *::before, :root[data-reduce-motion='1'] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* Bénéfice calculé (article commandé) */ .article-profit { padding: 8px 12px; background: var(--green-soft); color: var(--green); border-radius: var(--radius); font-size: 13.5px; font-weight: 600; } .article-profit strong { font-variant-numeric: tabular-nums; } /* Bandeau d'avertissement (ex. modèle CGU à adapter) */ .banner-warn { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; font-weight: 500; } /* Pagination (listes paginées, ex. clients) */ .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .pager-info { font-size: 13px; color: var(--text-muted); font-weight: 600; min-width: 90px; text-align: center; } .pager .btn[disabled] { opacity: .45; cursor: not-allowed; } /* Bandeau ticker : occupe l'espace libre entre la recherche et la cloche. La notif défile de la cloche (droite) vers la recherche (gauche). */ .notif-ticker { position: relative; flex: 1 1 0; min-width: 0; height: 40px; overflow: hidden; display: flex; align-items: center; cursor: pointer; } .notif-ticker:not(.show) { pointer-events: none; } .notif-ticker:not(.show) .notif-ticker-text { opacity: 0; } .notif-ticker-text { white-space: nowrap; font-size: 13.5px; font-weight: 800; color: var(--accent); will-change: transform, opacity; } @media (max-width: 760px) { .notif-ticker { display: none; } } /* Timeline : « il y a X » à GAUCHE de chaque boule, ancré à droite, toujours sur 1 ligne */ .timeline { padding-left: 116px; } .timeline::before { left: 98px; } .tl-dot { left: -26px; } .tl-ago { position: absolute; right: calc(100% + 34px); top: 2px; white-space: nowrap; font-size: 10.5px; line-height: 1.2; font-weight: 600; color: var(--text-faint); } @media (max-width: 760px) { .timeline { padding-left: 96px; } .timeline::before { left: 78px; } .tl-ago { right: calc(100% + 28px); font-size: 10px; } } /* Filtres rapides (chips cliquables) */ .quick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .qchip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: var(--transition); } .qchip:hover { border-color: var(--border-strong); } .qchip.active { background: var(--accent); color: #fff; border-color: var(--accent); } .qchip-reset { color: var(--text-faint); } /* Bandeau financier : Chiffre d'affaires − Dépenses = Bénéfice */ .ca-banner { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); padding: 14px 18px; } .ca-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .ca-cell { min-width: 130px; } .ca-cell .ca-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); } .ca-cell .ca-value { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; margin-top: 2px; } .ca-cell .ca-value.red { color: var(--red); } .ca-cell .ca-value.green { color: var(--green); } .ca-cell .ca-value .ca-ht { font-size: 12px; font-weight: 700; color: var(--text-faint); } .ca-cell .ca-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .ca-op { font-size: 26px; font-weight: 800; color: var(--text-faint); } .ca-benef { margin-left: auto; padding-left: 16px; border-left: 1px dashed var(--border-strong); } @media (max-width: 680px) { .ca-op { display: none; } .ca-benef { margin-left: 0; border-left: 0; padding-left: 0; } } /* Filtres rapides (chips cliquables) */