*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-primary:#ffffff; --bg-secondary:#f5f5f4; --bg-tertiary:#efede8;
--sidebar-bg:#1a1a18; --sidebar-text:#a0a09a; --sidebar-accent:#627eea;
--sidebar-hover:rgba(255,255,255,0.07);
--text-primary:#1a1a18; --text-secondary:#6b6b67;
--border:rgba(0,0,0,0.1); --border-md:rgba(0,0,0,0.18);
--radius-md:8px; --radius-lg:12px; --radius-xl:16px;
}
@media (prefers-color-scheme:dark) {
:root {
--bg-primary:#1c1c1e; --bg-secondary:#2c2c2e; --bg-tertiary:#111110;
--sidebar-bg:#0d0d0c;
--text-primary:#f2f2f0; --text-secondary:#9a9a96;
--border:rgba(255,255,255,0.1); --border-md:rgba(255,255,255,0.18);
}
}
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; background:var(--bg-tertiary); color:var(--text-primary); min-height:100vh; display:flex; }
/* ── SIDEBAR ── */
.sidebar { width:225px; min-height:100vh; background:var(--sidebar-bg); display:flex; flex-direction:column; flex-shrink:0; position:fixed; top:0; left:0; bottom:0; z-index:50; overflow-y:auto; }
.sidebar-logo { padding:1.5rem 1.25rem 1.1rem; border-bottom:0.5px solid rgba(255,255,255,0.07); }
.sidebar-logo span { font-size:15px; font-weight:600; color:#f2f2f0; letter-spacing:-0.01em; }
.sidebar-logo small { display:block; font-size:11px; color:rgba(255,255,255,0.28); margin-top:3px; }
.sidebar-nav { padding:1rem 0; flex:1; display:flex; flex-direction:column; }
.nav-section-label { font-size:10px; font-weight:500; color:rgba(255,255,255,0.22); text-transform:uppercase; letter-spacing:0.09em; padding:0.75rem 1.25rem 0.4rem; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 1.25rem; font-size:13.5px; color:var(--sidebar-text); cursor:pointer; transition:all 0.12s; border-left:2px solid transparent; user-select:none; }
.nav-item:hover { background:var(--sidebar-hover); color:#f2f2f0; }
.nav-item.active { color:#f2f2f0; border-left-color:var(--sidebar-accent); background:rgba(98,126,234,0.1); }
.nav-item.parent { font-size:13px; font-weight:500; color:rgba(255,255,255,0.5); cursor:default; pointer-events:none; margin-top:4px; }
.nav-item.top-level { font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.75); border-left:2px solid transparent; }
.nav-item.sub { padding-left:2.75rem; font-size:13px; }
.nav-divider { height:0.5px; background:rgba(255,255,255,0.07); margin:0.6rem 1.25rem; }
.nav-icon { width:15px; height:15px; flex-shrink:0; opacity:0.65; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity:1; }
.sidebar-footer { padding:1rem 1.25rem; border-top:0.5px solid rgba(255,255,255,0.07); font-size:11px; color:rgba(255,255,255,0.18); }
/* ── PRIX LIVE BADGE ── */
.live-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:3px 9px; border-radius:99px; background:#e6f7f1; color:#1a7a50; font-weight:500; }
.live-badge.error { background:#fdecea; color:#a82020; }
.live-badge.loading { background:#fff8e1; color:#a05c0a; }
.live-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.price-status { display:flex; align-items:center; gap:10px; margin-bottom:1.5rem; flex-wrap:wrap; }
.price-status span { font-size:12px; color:var(--text-secondary); }
.refresh-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; font-size:12px; border:0.5px solid var(--border-md); border-radius:var(--radius-md); cursor:pointer; background:transparent; color:var(--text-secondary); font-family:inherit; transition:all 0.15s; }
.refresh-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }
.spin { animation:spin 1s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
/* ── MAIN ── */
.main { margin-left:225px; flex:1; padding:2rem 2rem 3rem; min-height:100vh; }
.page { display:none; }
.page.active { display:block; }
.page-header { margin-bottom:1.5rem; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.page-header-left h1 { font-size:22px; font-weight:600; color:var(--text-primary); }
.page-header-left p { font-size:14px; color:var(--text-secondary); margin-top:4px; }
/* ── METRICS ── */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:1.5rem; }
.metrics.flex-row { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) !important; gap:10px !important; }
.metrics.flex-row .metric { min-width:0; }
.metric { background:var(--bg-secondary); border-radius:var(--radius-md); padding:1rem 1.25rem; }
.metric-label { font-size:11px; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em; }
.metric-value { font-size:21px; font-weight:600; color:var(--text-primary); }
.metric-sub { font-size:12px; margin-top:4px; color:var(--text-secondary); }
.pos { color:#2d9e6b !important; } .neg { color:#c94040 !important; }
/* ── CARD ── */
.card { background:var(--bg-primary); border-radius:var(--radius-lg); border:0.5px solid var(--border); padding:1.5rem; margin-bottom:1.5rem; }
.section-title { font-size:12px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }
/* ── CHART ── */
.chart-tabs { display:flex; gap:8px; margin-bottom:1rem; flex-wrap:wrap; }
.tab { padding:5px 14px; font-size:13px; border:0.5px solid var(--border-md); border-radius:var(--radius-md); cursor:pointer; background:transparent; color:var(--text-secondary); transition:all 0.15s; font-family:inherit; }
.tab.active,.tab:hover { background:var(--bg-secondary); color:var(--text-primary); }
.chart-wrapper { position:relative; width:100%; height:280px; }
.legend { display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
.leg-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.leg-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
/* ── TABLE ── */
.table-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; flex-wrap:wrap; gap:8px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead tr { background:var(--bg-secondary); }
th { padding:10px 14px; text-align:left; font-weight:500; color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
td { padding:11px 14px; border-top:0.5px solid var(--border); color:var(--text-primary); }
tbody tr:hover { background:var(--bg-secondary); }
.del-btn { background:none; border:none; cursor:pointer; color:var(--text-secondary); font-size:18px; padding:0 4px; border-radius:4px; line-height:1; }
.del-btn:hover { color:#c94040; }
/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:500; white-space:nowrap; }
.badge-positive { background:#e6f7f1; color:#1a7a50; }
.badge-negative { background:#fdecea; color:#a82020; }
/* ── BUTTONS ── */
.add-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; font-size:13px; border:none; border-radius:var(--radius-md); cursor:pointer; background:var(--text-primary); color:var(--bg-primary); font-family:inherit; font-weight:500; transition:opacity 0.15s; white-space:nowrap; }
.add-btn:hover { opacity:0.8; }
/* ── MODAL ── */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index:200; }
.overlay.open { display:flex; }
.modal { background:var(--bg-primary); border-radius:var(--radius-xl); border:0.5px solid var(--border); padding:1.75rem; width:420px; max-width:92vw; }
.modal h3 { font-size:17px; font-weight:600; margin-bottom:1.5rem; color:var(--text-primary); }
.form-row { margin-bottom:1rem; }
.form-row label { display:block; font-size:11px; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
.form-row input,.form-row select { width:100%; padding:9px 12px; font-size:14px; border:0.5px solid var(--border-md); border-radius:var(--radius-md); background:var(--bg-secondary); color:var(--text-primary); font-family:inherit; }
.form-row input:focus,.form-row select:focus { outline:none; border-color:#627eea; }
.form-hint { font-size:11px; color:var(--text-secondary); margin-top:5px; line-height:1.5; }
.form-actions { display:flex; gap:8px; margin-top:1.5rem; justify-content:flex-end; }
.btn-cancel { padding:8px 18px; font-size:13px; border:0.5px solid var(--border-md); border-radius:var(--radius-md); background:transparent; cursor:pointer; color:var(--text-secondary); font-family:inherit; }
.btn-save { padding:8px 18px; font-size:13px; border:none; border-radius:var(--radius-md); background:var(--text-primary); color:var(--bg-primary); cursor:pointer; font-family:inherit; font-weight:500; }
.btn-cancel:hover { background:var(--bg-secondary); }
.empty { text-align:center; padding:2.5rem; color:var(--text-secondary); font-size:14px; }
/* ── OVERVIEW ── */
.ov-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.ov-grid .card { margin-bottom:0; }
.alloc-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:0.5px solid var(--border); font-size:13px; }
.alloc-row:first-child { border-top:none; }
.alloc-bar-wrap { flex:1; height:6px; background:var(--bg-secondary); border-radius:3px; overflow:hidden; }
.alloc-bar { height:100%; border-radius:3px; }
.alloc-name { width:120px; flex-shrink:0; color:var(--text-primary); font-weight:500; }
.alloc-pct { width:40px; text-align:right; color:var(--text-secondary); font-size:12px; }
.alloc-val { width:95px; text-align:right; color:var(--text-primary); font-weight:500; }
/* ── VÉHICULES ── */
.veh-status-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.veh-en-cours { background:#f59e0b; }
.veh-vendu { background:#2d9e6b; }
.veh-badge-encours { background:#fff8e1; color:#a05c0a; }
.veh-badge-vendu { background:#e6f7f1; color:#1a7a50; }
.frais-row { display:flex; gap:8px; align-items:center; }
.frais-row input { flex:1; }
.frais-row .frais-label { font-size:12px; color:var(--text-secondary); width:120px; flex-shrink:0; }
.frais-list { margin-top:6px; }
.frais-item { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; border-bottom:0.5px solid var(--border); }
.frais-item:last-child { border-bottom:none; }
.frais-total { display:flex; justify-content:space-between; font-size:13px; font-weight:600; padding-top:6px; margin-top:4px; border-top:1px solid var(--border-md); }
.veh-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.veh-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; transition:box-shadow 0.15s; }
.veh-card:hover { border-color:var(--border-md); }
.veh-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.veh-card-title { font-size:15px; font-weight:600; color:var(--text-primary); }
.veh-card-plate { font-size:12px; color:var(--text-secondary); margin-top:2px; font-family:monospace; letter-spacing:0.05em; }
.veh-card-body { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-size:13px; }
.veh-field { }
.veh-field-label { font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary); margin-bottom:2px; }
.veh-field-value { font-weight:500; color:var(--text-primary); }
.veh-card-footer { margin-top:1rem; padding-top:1rem; border-top:0.5px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.veh-benef { font-size:16px; font-weight:700; }
.veh-card-actions { display:flex; gap:6px; }
.veh-btn { padding:5px 12px; font-size:12px; border:0.5px solid var(--border-md); border-radius:var(--radius-md); cursor:pointer; background:transparent; color:var(--text-secondary); font-family:inherit; transition:all 0.12s; }
.veh-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }
.veh-btn.sell { background:var(--text-primary); color:var(--bg-primary); border-color:var(--text-primary); }
.veh-btn.sell:hover { opacity:0.8; }
.veh-filters { display:flex; gap:8px; margin-bottom:1.25rem; flex-wrap:wrap; }
/* ── REVENUS & EMPRUNTS ── */
.fin-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.fin-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; }
.fin-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.fin-card-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.fin-card-sub { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.fin-card-amount { font-size:20px; font-weight:700; }
.fin-card-body { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:13px; margin-top:10px; }
.fin-field-label { font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary); margin-bottom:1px; }
.fin-field-value { font-weight:500; color:var(--text-primary); font-size:13px; }
/* Sous-ligne d'une fin-field (ex: décomposition mensualité = intérêts + capital) */
.fin-field-sub {
font-size: 10.5px;
color: var(--text-secondary);
margin-top: 2px;
font-variant-numeric: tabular-nums;
line-height: 1.3;
}
.fin-card-footer { margin-top:1rem; padding-top:0.75rem; border-top:0.5px solid var(--border); display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
/* Bouton « − 1 mensualité » sur la carte emprunt */
.veh-btn.emp-deduct-btn {
margin-right: auto; /* placé à gauche, séparé des actions Modifier/Suppr. */
color: var(--cc-pos, #2d9e6b);
border-color: color-mix(in srgb, var(--cc-pos, #2d9e6b) 35%, var(--border));
font-weight: 600;
}
.veh-btn.emp-deduct-btn:hover {
background: color-mix(in srgb, var(--cc-pos, #2d9e6b) 12%, var(--bg-primary));
border-color: var(--cc-pos, #2d9e6b);
color: var(--cc-pos, #2d9e6b);
}
/* barre de progression emprunt */
.emprunt-progress { margin-top:12px; }
.emprunt-progress-label { display:flex; justify-content:space-between; font-size:11px; color:var(--text-secondary); margin-bottom:5px; }
.emprunt-progress-bar { height:6px; background:var(--bg-secondary); border-radius:3px; overflow:hidden; }
.emprunt-progress-fill { height:100%; border-radius:3px; background:#e63946; transition:width 0.4s; }
/* ══════════════════════════════════════════════════
COMPARATEUR D'INVESTISSEMENTS — Page Épargne
══════════════════════════════════════════════════ */
.invest-cmp-card { padding: 20px 22px; }
.invest-cmp-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.invest-cmp-input {
display: flex; flex-direction: column; gap: 4px;
}
.invest-cmp-input > label {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-secondary);
}
.invest-cmp-input > label small {
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.invest-cmp-field {
display: flex; align-items: center; gap: 6px;
background: var(--bg-primary);
border: 1px solid var(--border-md, var(--border));
border-radius: 8px;
padding: 6px 10px;
transition: border-color .15s, box-shadow .15s;
}
.invest-cmp-field:focus-within {
border-color: var(--page-accent, #5b6ff0);
box-shadow: 0 0 0 3px var(--page-accent-soft);
}
.invest-cmp-field input {
flex: 1; min-width: 0;
border: none; outline: none; background: transparent;
font-size: 14px; font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.invest-cmp-field span {
font-size: 12.5px;
color: var(--text-secondary);
font-weight: 600;
}
.invest-cmp-summary {
padding: 10px 14px;
background: var(--bg-secondary);
border-radius: 8px;
font-size: 12.5px;
color: var(--text-secondary);
margin-bottom: 12px;
display: flex; gap: 14px; flex-wrap: wrap;
}
.invest-cmp-summary strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.invest-cmp-table-wrap { overflow-x: auto; }
.invest-cmp-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 700px;
}
.invest-cmp-table thead th {
padding: 10px 12px;
text-align: left;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-secondary);
border-bottom: 1px solid var(--border);
background: var(--bg-secondary);
}
.invest-cmp-table th.num, .invest-cmp-table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.invest-cmp-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}
.invest-cmp-table tbody tr:last-child td { border-bottom: none; }
.invest-cmp-table tbody tr.invest-cmp-best td {
background: color-mix(in srgb, var(--cc-pos) 8%, var(--bg-primary));
}
.invest-cmp-table .num.pos { color: var(--cc-pos); font-weight: 700; }
.invest-cmp-table .num.neg { color: var(--cc-neg); font-weight: 600; }
.invest-cmp-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 99px;
font-weight: 700;
font-size: 12px;
}
.invest-cmp-tag-best {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
background: color-mix(in srgb, var(--cc-pos) 18%, var(--bg-primary));
color: var(--cc-pos);
border-radius: 99px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
}
.invest-cmp-tag-plafond {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
background: color-mix(in srgb, #f59e0b 18%, var(--bg-primary));
color: #c2740a;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
}
.invest-cmp-gain-net { min-width: 200px; }
.invest-cmp-gain-net .invest-cmp-bar {
display: block;
height: 5px;
background: var(--bg-secondary);
border-radius: 99px;
overflow: hidden;
margin-bottom: 4px;
}
.invest-cmp-bar-fill {
display: block;
height: 100%;
border-radius: 99px;
transition: width .35s ease;
}
.invest-cmp-foot {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
color: var(--text-secondary);
font-size: 11px;
line-height: 1.55;
}
/* Bloc « intérêts déjà payés » sur la carte emprunt */
.emprunt-interets {
margin-top: 10px;
padding: 8px 12px;
background: color-mix(in srgb, #e63946 8%, var(--bg-primary));
border-left: 3px solid #e63946;
border-radius: 6px;
}
.emprunt-interets-row {
display: flex; justify-content: space-between; align-items: baseline;
}
.emprunt-interets-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.emprunt-interets-value {
font-size: 15px;
font-weight: 800;
color: #e63946;
font-variant-numeric: tabular-nums;
}
.emprunt-interets-meta {
font-size: 10.5px;
color: var(--text-secondary);
margin-top: 3px;
}
/* taux endettement */
.endettement-gauge { display:flex; align-items:center; gap:16px; padding:1rem 0; }
.gauge-circle { position:relative; width:110px; height:110px; flex-shrink:0; }
.gauge-circle svg { transform:rotate(-90deg); }
.gauge-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-pct { font-size:22px; font-weight:700; }
.gauge-label { font-size:10px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; }
.gauge-info { flex:1; }
.gauge-info-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:5px 0; border-bottom:0.5px solid var(--border); }
.gauge-info-row:last-child { border-bottom:none; }
.badge-danger { background:#fdecea; color:#a82020; }
.badge-warning { background:#fff8e1; color:#a05c0a; }
.badge-ok { background:#e6f7f1; color:#1a7a50; }
/* ── ALERTES ── */
.alerte { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:var(--radius-md); margin-bottom:8px; font-size:13px; border-left:3px solid; }
.alerte-danger { background:#fdecea; border-color:#e63946; color:#7a1f1f; }
.alerte-warning { background:#fff8e1; border-color:#f59e0b; color:#7a4f00; }
.alerte-info { background:#e8ecfd; border-color:#627eea; color:#1f2e7a; }
.alerte-icon { font-size:15px; flex-shrink:0; margin-top:1px; }
/* ── VALEUR NETTE ── */
.vn-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:0.5px solid var(--border); font-size:13px; }
.vn-row:last-child { border-bottom:none; }
.vn-total { display:flex; justify-content:space-between; align-items:center; padding:10px 0 0; margin-top:4px; border-top:1px solid var(--border-md); font-size:15px; font-weight:700; }
/* ── CASH-FLOW ── */
.cf-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; border-bottom:0.5px solid var(--border); }
.cf-row:last-child { border-bottom:none; }
.cf-total { display:flex; justify-content:space-between; align-items:center; padding:10px 0 0; margin-top:4px; border-top:1px solid var(--border-md); font-size:15px; font-weight:700; }
/* ── ÉPARGNE ── */
.epargne-bar-wrap { height:10px; background:var(--bg-secondary); border-radius:5px; overflow:hidden; margin:8px 0; }
.epargne-bar { height:100%; border-radius:5px; transition:width 0.5s; }
/* ── MODE SOMBRE/CLAIR TOGGLE ── */
.theme-toggle { position:fixed; bottom:1.25rem; right:1.25rem; width:38px; height:38px; border-radius:50%; background:var(--bg-primary); border:0.5px solid var(--border-md); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; z-index:60; box-shadow:0 2px 8px rgba(0,0,0,0.12); transition:all 0.15s; }
.theme-toggle:hover { background:var(--bg-secondary); }
.privacy-toggle { position:fixed; bottom:1.25rem; right:4.25rem; width:38px; height:38px; border-radius:50%; background:var(--bg-primary); border:0.5px solid var(--border-md); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; z-index:60; box-shadow:0 2px 8px rgba(0,0,0,0.12); transition:all 0.15s; }
.privacy-toggle:hover { background:var(--bg-secondary); }
/* Mode confidentialité — chiffres masqués par ••••• de la bonne couleur */
body.privacy .prv { position:relative; color:transparent !important; }
/* ══ MODE CONFIDENTIALITÉ — masquage complet ══ */
/* Tableau trésorerie */
body.privacy #cc-tresorerie-table input[type=number] { filter:blur(6px) !important; pointer-events:none; }
body.privacy #cc-tresorerie-table td { filter:blur(5px) !important; }
/* Vue d'ensemble */
body.privacy .metric-value, body.privacy .metric-sub { filter:blur(5px) !important; color:transparent !important; }
body.privacy .alloc-val, body.privacy .alloc-pct { filter:blur(5px) !important; }
body.privacy .vn-row, body.privacy .vn-total { filter:blur(5px) !important; }
body.privacy .cf-row, body.privacy .cf-total { filter:blur(5px) !important; }
body.privacy .gauge-pct, body.privacy .gauge-info-row span:last-child { filter:blur(5px) !important; }
body.privacy #kpi-rec, body.privacy #kpi-dep, body.privacy #kpi-diff,
body.privacy #kpi-day, body.privacy #kpi-week { filter:blur(5px) !important; }
/* Emprunts */
body.privacy .fin-field-value { filter:blur(5px) !important; }
body.privacy .emprunt-progress-bar { filter:blur(3px) !important; }
body.privacy #emp-metrics .metric-value { filter:blur(5px) !important; }
/* Véhicules */
body.privacy .veh-field-value { filter:blur(5px) !important; }
body.privacy .veh-benef { filter:blur(5px) !important; }
body.privacy .frais-item span:last-child { filter:blur(5px) !important; }
/* Crypto & Bourse */
body.privacy .leg-item { filter:blur(5px) !important; }
body.privacy #crypto-metrics .metric-value,
body.privacy #bourse-metrics .metric-value { filter:blur(5px) !important; }
body.privacy #crypto-recap-live, body.privacy #bourse-recap-live { filter:blur(5px) !important; }
body.privacy .badge-positive, body.privacy .badge-negative { filter:blur(4px) !important; }
body.privacy td.pos, body.privacy td.neg { filter:blur(4px) !important; }
/* Compte courant */
body.privacy #cc-solde-depart, body.privacy #cc-solde-prev { filter:blur(6px) !important; }
body.privacy #cc-cm-total-big, body.privacy #cc-amex-total-big { filter:blur(6px) !important; }
body.privacy #cc-solde-prev-detail { filter:blur(5px) !important; }
/* Revenus / Charges */
body.privacy .fin-field-value { filter:blur(5px) !important; }
body.privacy #rev-metrics .metric-value,
body.privacy #chg-metrics .metric-value { filter:blur(5px) !important; }
/* Pronostics / Paris */
body.privacy .paris-gain, body.privacy .paris-cote { filter:blur(5px) !important; }
/* Graphiques */
body.privacy canvas { filter:blur(12px) !important; }
body.privacy .prv::after { content:'•••••'; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:0.9em; letter-spacing:1px; }
body.privacy .prv.pos::after { color:#2d9e6b; }
body.privacy .prv.neg::after { color:#e63946; }
body.privacy .prv.neu::after { color:var(--text-primary); }
body.privacy canvas { filter:blur(12px); transition:filter 0.2s; }
body.privacy .privacy-banner { display:flex !important; }
body.force-dark { --bg-primary:#1c1c1e; --bg-secondary:#2c2c2e; --bg-tertiary:#111110; --sidebar-bg:#0d0d0c; --text-primary:#f2f2f0; --text-secondary:#9a9a96; --border:rgba(255,255,255,0.1); --border-md:rgba(255,255,255,0.18); }
body.force-light { --bg-primary:#ffffff; --bg-secondary:#f5f5f4; --bg-tertiary:#efede8; --sidebar-bg:#1a1a18; --text-primary:#1a1a18; --text-secondary:#6b6b67; --border:rgba(0,0,0,0.1); --border-md:rgba(0,0,0,0.18); }
/* ── EXPORT PDF ── */
.export-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; font-size:12px; border:0.5px solid var(--border-md); border-radius:var(--radius-md); cursor:pointer; background:transparent; color:var(--text-secondary); font-family:inherit; transition:all 0.15s; }
.export-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }
@media print {
.sidebar, .refresh-btn, .export-btn, .theme-toggle, .add-btn, .veh-btn, .del-btn, .price-status, #ov-alertes { display:none !important; }
.main { margin-left:0 !important; }
.page { display:block !important; }
.card { break-inside:avoid; }
}
/* ── CRÉANCES & DETTES ── */
.cd-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.cd-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.cd-card-head { padding:1rem 1.25rem 0.75rem; border-bottom:0.5px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.cd-card-title { font-size:13px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.cd-card-total { font-size:16px; font-weight:700; }
.cd-item { display:flex; align-items:center; justify-content:space-between; padding:10px 1.25rem; border-bottom:0.5px solid var(--border); font-size:13px; }
.cd-item:last-child { border-bottom:none; }
.cd-item-left { display:flex; flex-direction:column; gap:2px; }
.cd-item-name { font-weight:500; color:var(--text-primary); }
.cd-item-meta { font-size:11px; color:var(--text-secondary); }
.cd-item-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.cd-amount { font-weight:700; font-size:14px; }
.cd-status { font-size:11px; padding:2px 8px; border-radius:99px; cursor:pointer; font-family:inherit; border:none; }
.cd-status-en-attente { background:#fff8e1; color:#a05c0a; }
.cd-status-partiellement { background:#e8ecfd; color:#3346a8; }
.cd-status-rembourse { background:#e6f7f1; color:#1a7a50; }
.cd-empty { text-align:center; padding:1.5rem; font-size:13px; color:var(--text-secondary); }
/* ── BILAN MENSUEL ── */
.bilan-table { width:100%; border-collapse:collapse; font-size:13px; }
.bilan-table th { padding:8px 12px; text-align:left; font-size:11px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; background:var(--bg-secondary); border-bottom:0.5px solid var(--border); }
.bilan-table td { padding:10px 12px; border-bottom:0.5px solid var(--border); color:var(--text-primary); }
.bilan-table tr:last-child td { border-bottom:none; }
.bilan-table tr:hover td { background:var(--bg-secondary); }
.bilan-mois-label { font-weight:600; }
.bilan-bar { height:4px; border-radius:2px; margin-top:4px; }
/* ── PARAMÈTRES ── */
.param-section { margin-bottom:2rem; }
.param-section h3 { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:1rem; padding-bottom:8px; border-bottom:0.5px solid var(--border); }
.param-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:0.5px solid var(--border); font-size:13px; }
.param-row:last-child { border-bottom:none; }
.param-label { color:var(--text-primary); }
.param-sub { font-size:11px; color:var(--text-secondary); margin-top:2px; }
/* ── NOTIFICATION BADGE ── */
.nav-badge { background:#e63946; color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:99px; margin-left:4px; }
/* ── PARIS SPORTIFS ── */
.paris-filters { display:flex; gap:8px; margin-bottom:1.25rem; flex-wrap:wrap; }
.paris-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1rem; transition:border-color 0.15s; }
.paris-card:hover { border-color:var(--border-md); }
.paris-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.75rem; }
.paris-type { font-size:11px; font-weight:600; padding:3px 10px; border-radius:99px; text-transform:uppercase; letter-spacing:0.05em; }
.paris-simple { background:#e8ecfd; color:#3346a8; }
.paris-combine { background:#fff8e1; color:#a05c0a; }
.paris-systeme { background:#f3e8fd; color:#6a28a8; }
.paris-statut-gagne { background:#e6f7f1; color:#1a7a50; }
.paris-statut-perdu { background:#fdecea; color:#a82020; }
.paris-statut-encours{ background:#f5f5f3; color:#6b6b67; }
.paris-statut-annule { background:#f5f5f3; color:#6b6b67; text-decoration:line-through; }
.paris-selections { font-size:12px; color:var(--text-secondary); margin:6px 0; line-height:1.6; }
.paris-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:0.5px solid var(--border); }
.paris-cote { font-size:18px; font-weight:700; color:var(--text-primary); }
.paris-gain { font-size:14px; font-weight:700; }
/* ── PORTAGE SALARIAL ── */
.portage-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.portage-section { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; }
.portage-section h3 { font-size:13px; font-weight:600; color:var(--text-primary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1.25rem; }
.portage-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:0.5px solid var(--border); font-size:13px; }
.portage-row:last-child { border-bottom:none; }
.portage-row label { color:var(--text-secondary); }
.portage-input { padding:6px 10px; font-size:13px; border:0.5px solid var(--border-md); border-radius:var(--radius-md); background:var(--bg-secondary); color:var(--text-primary); font-family:inherit; width:130px; text-align:right; }
.portage-total { display:flex; justify-content:space-between; align-items:center; padding:12px 0 0; margin-top:6px; border-top:1px solid var(--border-md); font-size:15px; font-weight:700; }
.portage-result { background:var(--bg-secondary); border-radius:var(--radius-md); padding:1.25rem; }
.portage-result-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:0.5px solid var(--border); }
.portage-result-row:last-child { border-bottom:none; }
.portage-result-total { display:flex; justify-content:space-between; padding:10px 0 0; margin-top:6px; border-top:1px solid var(--border-md); font-size:16px; font-weight:700; }
.portage-tabs { display:flex; gap:6px; margin-bottom:1.25rem; }
/* ── SKELETON LOADER ── */
.skeleton { background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:4px; height:22px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* ── RESPONSIVE ── */
/* ── RESPONSIVE MOBILE ── */
.hamburger { display:none; position:fixed; top:1rem; left:1rem; z-index:200; width:36px; height:36px; border-radius:8px; background:var(--sidebar-bg); border:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.hamburger span { display:block; width:18px; height:2px; background:#fff; border-radius:1px; transition:all 0.2s; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:149; }
.sidebar-overlay.open { display:block; }
@media (max-width:900px) {
.metrics { grid-template-columns:repeat(2,1fr); }
.ov-grid { grid-template-columns:1fr; }
.cd-cols { grid-template-columns:1fr; }
.portage-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
.hamburger { display:flex; }
.sidebar { position:fixed; left:-240px; top:0; height:100%; z-index:150; transition:left 0.25s ease; overflow-y:auto; }
.sidebar.open { left:0; box-shadow:6px 0 24px rgba(0,0,0,0.4); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:149; }
.sidebar-overlay.open { display:block; }
.main { margin-left:0; padding:1rem; padding-top:4rem; overflow-x:hidden; }
.page-header { flex-direction:column; align-items:flex-start; gap:8px; }
.page-header h1 { font-size:20px; }
.metrics { grid-template-columns:1fr 1fr; gap:8px; }
.metrics.flex-row { display:grid !important; grid-template-columns:1fr 1fr !important; }
.metric { padding:10px 12px; }
.metric-value { font-size:16px; }
.ov-grid { grid-template-columns:1fr; }
.cd-cols { grid-template-columns:1fr; }
.portage-grid { grid-template-columns:1fr; }
.card { padding:14px; margin-bottom:1rem; }
table { font-size:11px; }
th, td { padding:6px 8px; }
.cc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.overlay { align-items:flex-end !important; padding:0 !important; }
.overlay .modal { border-radius:20px 20px 0 0 !important; margin:0 !important; width:100% !important; max-width:100% !important; max-height:88vh; overflow-y:auto; }
.privacy-toggle { bottom:4.5rem; right:1rem; }
.theme-toggle { bottom:1rem; right:1rem; }
#prevision-2026-table { overflow-x:auto; }
#prevision-2026-table table { min-width:700px; }
}
@media (max-width:420px) {
.metrics { grid-template-columns:1fr; }
.metrics.flex-row { grid-template-columns:1fr !important; }
.modal { padding:1rem; }
}
/* ── COMPTE COURANT ── */
.cc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cc-table { border-collapse:collapse; font-size:13px; min-width:900px; width:100%; }
.cc-table th { position:sticky; top:0; background:var(--bg-secondary); padding:8px 10px; font-size:11px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; border-bottom:0.5px solid var(--border); text-align:center; white-space:nowrap; z-index:2; }
.cc-table th.cc-label-col { text-align:left; min-width:130px; position:sticky; left:0; background:var(--bg-secondary); z-index:3; }
.cc-table td { padding:7px 10px; border:0.5px solid var(--border); text-align:right; font-size:12px; white-space:nowrap; vertical-align:middle; }
.cc-table td.cc-label-col { text-align:left; font-weight:500; color:var(--text-primary); position:sticky; left:0; background:var(--bg-primary); z-index:1; font-size:12px; }
.cc-table tr:hover td { background:var(--bg-secondary); }
.cc-table tr:hover td.cc-label-col { background:var(--bg-secondary); }
.cc-section-header td { background:var(--bg-tertiary) !important; font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; padding:5px 10px; }
.cc-section-header td.cc-label-col { background:var(--bg-tertiary) !important; }
.cc-solde-row td { font-weight:700; background:var(--bg-secondary) !important; border-top:1px solid var(--border-md); }
.cc-solde-row td.cc-label-col { background:var(--bg-secondary) !important; color:var(--text-primary); }
.cc-cell-edit { cursor:pointer; border-radius:4px; transition:background 0.1s; min-width:70px; }
.cc-cell-edit:hover { background:rgba(98,126,234,0.12) !important; }
.cc-cell-input { width:80px; padding:3px 6px; font-size:12px; border:1px solid #627eea; border-radius:4px; background:var(--bg-primary); color:var(--text-primary); font-family:inherit; text-align:right; }
.cc-pos { color:#2d9e6b; }
.cc-neg { color:#e63946; }
.cc-zero { color:var(--text-secondary); }
.cc-weekend { background:var(--bg-secondary) !important; opacity:0.6; }
.cc-today { background:rgba(98,126,234,0.08) !important; outline:1.5px solid #627eea; outline-offset:-1px; }
/* ── CADENAS PORTAGE ── */
.lock-btn { background:none; border:0.5px solid var(--border-md); border-radius:6px; cursor:pointer; font-size:13px; padding:3px 6px; color:var(--text-secondary); transition:all 0.15s; line-height:1; }
.lock-btn:hover { background:var(--bg-secondary); }
.lock-btn.locked { color:#f59e0b; border-color:#f59e0b44; background:#f59e0b11; }
.portage-input:disabled { opacity:0.5; cursor:not-allowed; }
/* ── OPPORTUNITÉS ── */
.opp-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1rem; transition:border-color 0.15s; }
.opp-card:hover { border-color:var(--border-md); }
.opp-score { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; }
.opp-score-a { background:#e6f7f1; color:#1a7a50; }
.opp-score-b { background:#fff8e1; color:#a05c0a; }
.opp-score-c { background:#fdecea; color:#a82020; }
.opp-header { display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; }
.opp-title { font-size:15px; font-weight:700; color:var(--text-primary); }
.opp-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.5; }
.opp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:10px 0; }
.opp-field { background:var(--bg-secondary); border-radius:var(--radius-md); padding:8px 10px; }
.opp-field-label { font-size:10px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em; }
.opp-field-val { font-size:14px; font-weight:700; color:var(--text-primary); margin-top:2px; }
.opp-ia-analyse { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-top:8px; border-top:0.5px solid var(--border); padding-top:8px; }
.opp-status { font-size:11px; padding:3px 10px; border-radius:99px; font-weight:600; }
.opp-status-watch { background:#e8ecfd; color:#3346a8; }
.opp-status-encheri { background:#fff8e1; color:#a05c0a; }
.opp-status-gagne { background:#e6f7f1; color:#1a7a50; }
/* ── PRONOSTICS IA ── */
.prono-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:1rem; }
.prono-matchup { display:flex; align-items:center; justify-content:center; gap:20px; margin:16px 0; flex-wrap:wrap; }
.prono-team { text-align:center; flex:1; min-width:100px; }
.prono-team-name { font-size:18px; font-weight:800; color:var(--text-primary); }
.prono-team-sub { font-size:12px; color:var(--text-secondary); margin-top:3px; }
.prono-vs { font-size:24px; font-weight:300; color:var(--text-secondary); }
.prono-score-bar { display:flex; border-radius:99px; overflow:hidden; height:10px; margin:8px 0; }
.prono-verdict { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:12px; font-size:15px; font-weight:700; margin:12px 0; }
.prono-verdict-win { background:#e6f7f1; color:#1a7a50; }
.prono-verdict-draw { background:#fff8e1; color:#a05c0a; }
.prono-verdict-away { background:#e8ecfd; color:#3346a8; }
.prono-verdict-skip { background:#fdecea; color:#a82020; }
.prono-paris-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:14px 0; }
.prono-pari-card { background:var(--bg-secondary); border-radius:var(--radius-md); padding:12px 14px; border:1.5px solid transparent; cursor:pointer; transition:all 0.15s; }
.prono-pari-card:hover { border-color:var(--sidebar-accent); }
.prono-pari-card.selected { border-color:var(--sidebar-accent); background:rgba(98,126,234,0.08); }
.prono-pari-label { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary); margin-bottom:4px; }
.prono-pari-desc { font-size:13px; font-weight:600; color:var(--text-primary); }
.prono-pari-cote { font-size:20px; font-weight:800; color:var(--sidebar-accent); margin:4px 0; }
.prono-pari-conf { font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; display:inline-block; margin-top:2px; }
.prono-conf-high { background:#e6f7f1; color:#1a7a50; }
.prono-conf-med { background:#fff8e1; color:#a05c0a; }
.prono-conf-low { background:#fdecea; color:#a82020; }
.prono-section-title { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary); font-weight:600; margin:16px 0 8px; }
.prono-fact { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:0.5px solid var(--border); font-size:13px; color:var(--text-primary); line-height:1.5; }
.prono-fact:last-child { border-bottom:none; }
.prono-fact-icon { font-size:16px; flex-shrink:0; width:24px; text-align:center; }
.prono-hist-card { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; margin-bottom:8px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color 0.12s; }
.prono-hist-card:hover { border-color:var(--border-md); }
.prono-loading { display:flex; align-items:center; gap:12px; padding:20px; color:var(--text-secondary); font-size:14px; }
.prono-spinner { width:24px; height:24px; border:2.5px solid var(--border); border-top-color:var(--sidebar-accent); border-radius:50%; animation:spin 0.8s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.prono-step { font-size:12px; color:var(--text-secondary); margin-top:4px; }
/* ── BMW F&F TABLE ── */
.ff-table { width:100%; border-collapse:collapse; font-size:13px; }
.ff-table th { background:var(--bg-secondary); color:var(--text-secondary); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:2; }
.ff-table td { padding:9px 10px; border-bottom:0.5px solid var(--border); vertical-align:middle; }
.ff-table tr:hover td { background:var(--bg-secondary); }
.ff-table tr:last-child td { border-bottom:none; }
.ff-score-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:12px; font-weight:800; }
.ff-score-a { background:#e6f7f1; color:#1a7a50; }
.ff-score-b { background:#fff8e1; color:#a05c0a; }
.ff-score-c { background:#fdecea; color:#a82020; }
.ff-benef-pos { color:#1a7a50; font-weight:700; }
.ff-benef-neg { color:#a82020; font-weight:700; }
.ff-card-wrap { background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.opp-card:hover { border-color:var(--border-md); }
.opp-score { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; }
.opp-score-a { background:#e6f7f1; color:#1a7a50; }
.opp-score-b { background:#fff8e1; color:#a05c0a; }
.opp-score-c { background:#fdecea; color:#a82020; }
.opp-header { display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; }
.opp-title { font-size:15px; font-weight:700; color:var(--text-primary); }
.opp-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.5; }
.opp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:10px 0; }
.opp-field { background:var(--bg-secondary); border-radius:var(--radius-md); padding:8px 10px; }
.opp-field-label { font-size:10px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em; }
.opp-field-val { font-size:14px; font-weight:700; color:var(--text-primary); margin-top:2px; }
.opp-ia-analyse { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-top:8px; border-top:0.5px solid var(--border); padding-top:8px; }
.opp-status { font-size:11px; padding:3px 10px; border-radius:99px; font-weight:600; }
.opp-status-watch { background:#e8ecfd; color:#3346a8; }
.opp-status-encheri { background:#fff8e1; color:#a05c0a; }
.opp-status-gagne { background:#e6f7f1; color:#1a7a50; }
.opp-status-passe { background:#f5f5f3; color:#6b6b67; }
.opp-ct-ok { color:#2d9e6b; font-weight:600; }
.opp-ct-warn { color:#f59e0b; font-weight:600; }
.opp-ct-bad { color:#e63946; font-weight:600; }
/* ── ASSISTANT BMW ── */
.bmw-msg { display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
.bmw-msg.user { flex-direction:row-reverse; }
.bmw-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.bmw-avatar.ai { background:#1c69d4; color:#fff; font-weight:700; font-size:11px; }
.bmw-avatar.user { background:var(--bg-secondary); }
.bmw-bubble { max-width:85%; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.6; white-space:pre-wrap; }
.bmw-bubble.ai { background:var(--bg-secondary); color:var(--text-primary); border-radius:4px 12px 12px 12px; }
.bmw-bubble.user { background:#627eea; color:#fff; border-radius:12px 4px 12px 12px; }
.bmw-time { font-size:10px; opacity:0.5; margin-top:4px; }
/* ── COMPTE COURANT ── */
.cc-solde-bar { display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:1rem; overflow-x:auto; }
.cc-solde-card { flex:1; min-width:120px; max-width:250px; background:var(--bg-primary); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:0.75rem 1rem; }
.cc-solde-label { font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.cc-solde-val { font-size:18px; font-weight:700; }
.cc-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:1rem; }
.cc-tx-row { display:grid; grid-template-columns:90px 1fr 110px 90px 90px 36px; gap:0; align-items:center; border-bottom:0.5px solid var(--border); }
.cc-tx-row:hover { background:var(--bg-secondary); }
.cc-tx-cell { padding:9px 10px; font-size:13px; }
.cc-tx-head { font-size:11px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em; background:var(--bg-secondary); border-radius:var(--radius-md) var(--radius-md) 0 0; }
.cc-point { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border-md); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; transition:all 0.15s; margin:auto; }
.cc-point.ok { background:#2d9e6b; border-color:#2d9e6b; color:#fff; }
.cc-month-header { font-size:12px; font-weight:600; color:var(--text-secondary); padding:10px 10px 4px; text-transform:uppercase; letter-spacing:0.05em; background:var(--bg-secondary); border-top:0.5px solid var(--border); }
.cc-month-summary { display:flex; gap:1.5rem; padding:6px 10px 10px; font-size:12px; background:var(--bg-secondary); }
.cc-imported { opacity:0.6; }
@media (max-width:700px) {
.cc-tx-row { grid-template-columns:70px 1fr 90px 36px; }
.cc-tx-cell.cc-hide-mobile { display:none; }
}
/* ── COTISATIONS TOGGLE ── */
.cot-toggle { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:4px 0; }
.cot-toggle-icon { font-size:12px; color:var(--text-secondary); transition:transform 0.2s; }
.cot-toggle-icon.open { transform:rotate(180deg); }
.cot-detail { overflow:hidden; transition:max-height 0.25s ease; max-height:0; }
.cot-detail.open { max-height:600px; }
#cc-tresorerie-table input[type=number]::-webkit-outer-spin-button,
#cc-tresorerie-table input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#cc-tresorerie-table input[type=number] { -moz-appearance:textfield; }
/* ════════════════════════════════════════════════════════════════════
✦ VISUAL POLISH LAYER — n'altère AUCUNE classe ni script existant
Ne modifie que l'apparence : couleurs, profondeur, micro-animations.
════════════════════════════════════════════════════════════════════ */
:root {
--accent:#5b6ff0;
--accent-2:#8b5cf6;
--accent-strong:#4753d6;
--accent-soft:rgba(91,111,240,0.12);
--success:#10b981;
--success-soft:rgba(16,185,129,0.13);
--danger:#ef4444;
--danger-soft:rgba(239,68,68,0.13);
--warning:#f59e0b;
--warning-soft:rgba(245,158,11,0.15);
--grad-accent:linear-gradient(135deg,#6c7df0 0%,#8b5cf6 100%);
--grad-emerald:linear-gradient(135deg,#10b981 0%,#059669 100%);
--grad-amber:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
--grad-rose:linear-gradient(135deg,#fb7185 0%,#e11d48 100%);
--shadow-xs:0 1px 2px rgba(15,18,40,0.05);
--shadow-sm:0 2px 8px rgba(15,18,40,0.06), 0 1px 2px rgba(15,18,40,0.04);
--shadow-md:0 10px 28px rgba(15,18,40,0.08), 0 2px 6px rgba(15,18,40,0.05);
--shadow-lg:0 24px 60px rgba(15,18,40,0.16), 0 4px 12px rgba(15,18,40,0.06);
--shadow-glow:0 8px 30px rgba(91,111,240,0.28);
}
@media (prefers-color-scheme:dark) {
:root {
--shadow-xs:0 1px 2px rgba(0,0,0,0.45);
--shadow-sm:0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
--shadow-md:0 12px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
--shadow-lg:0 30px 70px rgba(0,0,0,0.7);
}
}
/* ── BACKGROUND AMBIANT ── */
body {
background:
radial-gradient(1100px 700px at 8% -10%, rgba(91,111,240,0.10), transparent 60%),
radial-gradient(900px 600px at 100% 110%, rgba(139,92,246,0.08), transparent 60%),
var(--bg-tertiary);
background-attachment: fixed;
}
@media (prefers-color-scheme:dark) {
body {
background:
radial-gradient(1100px 700px at 8% -10%, rgba(91,111,240,0.16), transparent 60%),
radial-gradient(900px 600px at 100% 110%, rgba(139,92,246,0.12), transparent 60%),
var(--bg-tertiary);
background-attachment: fixed;
}
}
/* ── SCROLLBARS DOUCES ── */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-md); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip:padding-box; }
/* ── SIDEBAR : profondeur + lueur ── */
.sidebar {
background:
radial-gradient(520px 360px at 0% 0%, rgba(98,126,234,0.22), transparent 65%),
radial-gradient(420px 320px at 100% 100%, rgba(139,92,246,0.12), transparent 60%),
linear-gradient(180deg, var(--sidebar-bg) 0%, #0a0a0c 100%);
border-right:1px solid rgba(255,255,255,0.05);
box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
.sidebar-logo {
position:relative;
padding:1.6rem 1.25rem 1.2rem 2.2rem;
border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-logo::before {
content:''; position:absolute; left:1.25rem; top:50%;
transform:translateY(-50%);
width:5px; height:34px; border-radius:99px;
background: linear-gradient(180deg,#8b5cf6 0%,#5b6ff0 100%);
box-shadow: 0 0 16px rgba(139,92,246,0.55);
}
.sidebar-logo span {
font-size:15px; font-weight:700; letter-spacing:-0.01em;
background: linear-gradient(180deg,#ffffff 0%,#cfd2e0 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.sidebar-logo small { color: rgba(255,255,255,0.38); margin-top:4px; }
.nav-section-label { color: rgba(255,255,255,0.28); font-weight:600; }
.nav-item { border-radius: 0; transition: background .18s, color .18s; }
.nav-item.active {
background: linear-gradient(90deg, rgba(98,126,234,0.22) 0%, rgba(139,92,246,0.05) 70%, transparent 100%);
border-left-color: transparent;
color:#fff;
position:relative;
}
.nav-item.active::before {
content:''; position:absolute; left:0; top:18%; bottom:18%;
width:3px; border-radius:0 4px 4px 0;
background: linear-gradient(180deg,#8b5cf6 0%,#5b6ff0 100%);
box-shadow: 0 0 14px rgba(139,92,246,0.7);
}
.nav-item:hover .nav-icon { transform: translateX(1px); }
.nav-icon { transition: transform .18s, opacity .18s; }
.nav-divider { background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); }
.nav-badge { background: var(--grad-rose); box-shadow:0 4px 10px rgba(225,29,72,0.45); }
/* ── PAGE HEADER ── */
.page-header-left h1 {
font-size:26px; font-weight:700; letter-spacing:-0.02em;
}
.page-header-left p { color: var(--text-secondary); }
/* ── METRICS : profondeur + bande accent ── */
.metric {
position:relative;
background: var(--bg-primary);
border:1px solid var(--border);
box-shadow: var(--shadow-xs);
overflow:hidden;
transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
padding:1.05rem 1.25rem 1.05rem 1.4rem;
}
.metric::before {
content:''; position:absolute; left:0; top:10%; bottom:10%;
width:3px; border-radius:0 3px 3px 0;
background: var(--grad-accent);
opacity:.9;
}
.metric:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--border-md);
}
.metric-label { font-weight:600; letter-spacing:0.06em; }
.metric-value { font-size:24px; font-weight:700; letter-spacing:-0.018em; }
.metric-sub { font-weight:500; }
.pos { color: var(--success) !important; }
.neg { color: var(--danger) !important; }
/* ── CARDS ── */
.card {
box-shadow: var(--shadow-sm);
transition: box-shadow .22s ease, border-color .22s ease;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-md); }
.section-title { font-weight:600; color: var(--text-secondary); }
/* ── TABS ── */
.tab {
border-radius:99px;
font-weight:500;
transition: all .18s ease;
}
.tab:hover {
background: var(--bg-secondary);
border-color: var(--border-md);
color: var(--text-primary);
}
.tab.active {
background: var(--grad-accent) !important;
color:#fff !important;
border-color: transparent !important;
box-shadow: 0 6px 18px rgba(91,111,240,0.32);
}
/* ── BUTTONS ── */
.add-btn {
background: var(--grad-accent);
color:#fff;
box-shadow: 0 6px 18px rgba(91,111,240,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
transition: transform .15s ease, box-shadow .22s ease, opacity .15s ease;
font-weight:600;
}
.add-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(91,111,240,0.42), inset 0 1px 0 rgba(255,255,255,0.2);
opacity:1;
}
.add-btn:active { transform: translateY(0); }
.btn-save {
background: var(--grad-accent); color:#fff;
box-shadow: 0 6px 18px rgba(91,111,240,0.3);
font-weight:600;
transition: transform .15s, box-shadow .22s;
}
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(91,111,240,0.4); }
.btn-cancel { transition: background .15s, color .15s; }
.refresh-btn, .export-btn, .veh-btn, .lock-btn {
transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.refresh-btn:hover, .export-btn:hover, .veh-btn:hover { transform: translateY(-1px); }
.veh-btn.sell {
background: var(--grad-emerald); color:#fff; border-color:transparent;
box-shadow:0 4px 12px rgba(16,185,129,0.32);
}
.veh-btn.sell:hover { box-shadow:0 8px 22px rgba(16,185,129,0.42); opacity:1; }
/* ── BADGES (pills plus fines) ── */
.badge { font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,0.05); }
.badge-positive { background: var(--success-soft); color: var(--cc-pos, #047857); }
.badge-negative { background: var(--danger-soft); color: var(--cc-neg, #b91c1c); }
.badge-warning { background: var(--warning-soft); color: var(--cc-amber, #b45309); }
.badge-ok { background: var(--success-soft); color: var(--cc-pos, #047857); }
.badge-danger { background: var(--danger-soft); color: var(--cc-neg, #b91c1c); }
.live-badge { box-shadow:0 1px 2px rgba(0,0,0,0.06); font-weight:600; }
.live-dot { box-shadow:0 0 8px currentColor; }
/* ── INPUTS ── */
.form-row input, .form-row select, .portage-input {
transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-row input:focus, .form-row select:focus, .portage-input:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(91,111,240,0.18);
background: var(--bg-primary);
}
/* ── TABLES (hover plus doux) ── */
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--bg-secondary); }
/* ── CARTES VÉHICULES / FINANCES ── */
.veh-card, .fin-card, .paris-card, .opp-card, .prono-card, .cd-card, .ff-card-wrap, .cc-solde-card {
box-shadow: var(--shadow-xs);
transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.veh-card:hover, .fin-card:hover, .paris-card:hover, .opp-card:hover, .cd-card:hover, .cc-solde-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--border-md);
}
.opp-score, .ff-score-badge {
box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.05);
}
/* ── BARRES DE PROGRESSION ── */
.alloc-bar { background: var(--grad-accent) !important; box-shadow: 0 0 8px rgba(91,111,240,0.4); }
.epargne-bar { background: var(--grad-emerald); box-shadow: 0 0 10px rgba(16,185,129,0.35); }
.emprunt-progress-fill { background: var(--grad-rose); box-shadow: 0 0 8px rgba(225,29,72,0.4); }
/* ── ALERTES ── */
.alerte { box-shadow: var(--shadow-xs); border-radius: var(--radius-md); }
.alerte-danger { background: var(--danger-soft); color:#7f1d1d; }
.alerte-warning { background: var(--warning-soft); color:#78350f; }
.alerte-info { background: var(--accent-soft); color:#1e2c8a; }
@media (prefers-color-scheme:dark) {
.alerte-danger { color:#fecaca; }
.alerte-warning { color:#fde68a; }
.alerte-info { color:#c7d2fe; }
}
/* ── MODAL : flou + lueur ── */
.overlay {
background: rgba(8,8,14,0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.modal {
box-shadow: var(--shadow-lg);
border-radius: var(--radius-xl);
animation: modalIn .22s ease;
}
@keyframes modalIn {
from { opacity:0; transform: translateY(8px) scale(.985); }
to { opacity:1; transform: translateY(0) scale(1); }
}
/* ── TOGGLES FLOTTANTS ── */
.theme-toggle, .privacy-toggle {
background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
border:1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .22s;
}
.theme-toggle:hover, .privacy-toggle:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ── PRONOSTICS / PARIS ── */
.prono-pari-card { transition: border-color .18s, background .18s, transform .15s; }
.prono-pari-card:hover { transform: translateY(-1px); }
.prono-pari-card.selected {
background: var(--accent-soft);
box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(91,111,240,0.18);
}
.prono-verdict { box-shadow: var(--shadow-xs); }
.prono-spinner { border-top-color: var(--accent); }
/* ── BMW CHAT BUBBLE ── */
.bmw-bubble.user { background: var(--grad-accent); box-shadow: 0 6px 16px rgba(91,111,240,0.3); }
.bmw-avatar.ai { background: linear-gradient(135deg,#1c69d4,#3b82f6); box-shadow:0 4px 12px rgba(28,105,212,0.35); }
/* ── TABLE COMPTE COURANT ── */
.cc-today { box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(91,111,240,0.32); outline:none !important; }
.cc-cell-input { box-shadow: 0 0 0 3px rgba(91,111,240,0.18); }
/* ── ANIMATION D'ENTRÉE LÉGÈRE SUR LES PAGES ── */
@keyframes pageIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
.page.active { animation: pageIn .28s ease both; }
/* ── ÉCRAN DE CONNEXION : verre dépoli + halo ── */
#login-screen {
background:
radial-gradient(700px 500px at 25% 20%, rgba(139,92,246,0.22), transparent 60%),
radial-gradient(800px 600px at 80% 85%, rgba(91,111,240,0.20), transparent 60%),
radial-gradient(500px 400px at 50% 100%, rgba(16,185,129,0.10), transparent 60%),
#0b0b10 !important;
}
#login-screen > div {
background: linear-gradient(180deg, rgba(44,44,52,0.78) 0%, rgba(22,22,28,0.92) 100%) !important;
border:1px solid rgba(255,255,255,0.10) !important;
backdrop-filter: blur(22px) saturate(1.2);
-webkit-backdrop-filter: blur(22px) saturate(1.2);
box-shadow:
0 30px 80px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 80px rgba(139,92,246,0.18) !important;
border-radius: 22px !important;
padding: 2.4rem 2rem 2rem !important;
}
#login-screen > div > div:first-child {
width:54px; height:54px; margin: 0 auto 14px !important;
display:flex; align-items:center; justify-content:center;
border-radius:16px;
background: linear-gradient(135deg, rgba(139,92,246,0.35), rgba(91,111,240,0.35));
box-shadow: 0 10px 30px rgba(91,111,240,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
font-size:26px !important;
}
#login-screen h2 {
font-size:22px !important; font-weight:700 !important;
background: linear-gradient(180deg,#ffffff,#c7cad6);
-webkit-background-clip:text; background-clip:text; color:transparent !important;
}
#login-pwd {
background: rgba(20,20,26,0.9) !important;
border:1px solid rgba(255,255,255,0.10) !important;
transition: border-color .18s, box-shadow .18s, background .18s;
}
#login-pwd:focus {
border-color: #8b5cf6 !important;
box-shadow: 0 0 0 4px rgba(139,92,246,0.22) !important;
outline:none !important;
background: rgba(28,28,36,0.95) !important;
}
#login-screen button {
background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important;
box-shadow: 0 10px 28px rgba(16,185,129,0.38), inset 0 1px 0 rgba(255,255,255,0.18) !important;
transition: transform .15s, box-shadow .22s, filter .15s !important;
letter-spacing:0.01em;
}
#login-screen button:hover {
transform: translateY(-1px);
box-shadow: 0 14px 34px rgba(16,185,129,0.5), inset 0 1px 0 rgba(255,255,255,0.18) !important;
filter: brightness(1.05);
}
#login-screen button:active { transform: translateY(0); }
/* ── HAMBURGER ── */
.hamburger { box-shadow: var(--shadow-sm); }
/* Le mode privacy garde la priorité — on n'altère pas son comportement */
/* ════════════════════════════════════════════════════════════════════
✦ PHASE 2 — Polish PAR PAGE (accents, hero header, télétravail, etc.)
════════════════════════════════════════════════════════════════════ */
/* ── Visibilité des pages ── */
.nav-item.nav-hidden, .nav-divider.nav-hidden { display:none !important; }
.page-vis-row {
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:9px 12px;
border:1px solid var(--border); border-radius: var(--radius-md);
background: var(--bg-secondary);
transition: border-color .15s, background .15s, transform .15s;
font-size:13px;
}
.page-vis-row:hover { border-color: var(--border-md); transform: translateY(-1px); background: var(--bg-primary); }
.page-vis-row.locked { opacity:.55; cursor:default; }
.page-vis-row.locked:hover { transform:none; background: var(--bg-secondary); }
.page-vis-label { color: var(--text-primary); font-weight:500; flex:1; min-width:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-vis-lock { font-size:10px; opacity:.6; margin-left:4px; }
.page-vis-switch { position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
.page-vis-switch input { opacity:0; width:0; height:0; }
.page-vis-switch .slider {
position:absolute; inset:0;
background: var(--bg-tertiary); border:1px solid var(--border-md);
border-radius:99px; cursor:pointer; transition: background .2s, border-color .2s, box-shadow .2s;
}
.page-vis-switch .slider::before {
content:''; position:absolute;
height:16px; width:16px; left:2px; top:2px;
background:#fff; border-radius:50%;
transition: transform .2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.page-vis-switch input:checked + .slider {
background: linear-gradient(135deg,#6c7df0,#8b5cf6);
border-color: transparent;
box-shadow: 0 0 12px rgba(91,111,240,0.4);
}
.page-vis-switch input:checked + .slider::before { transform: translateX(16px); }
.page-vis-switch input:disabled + .slider { opacity:.6; cursor:not-allowed; }
/* ── Module Télétravail (jours) ── */
.jours-cycle-card {
background:
radial-gradient(400px 220px at 0% 0%, rgba(91,111,240,0.10), transparent 60%),
linear-gradient(135deg, rgba(91,111,240,0.05), rgba(139,92,246,0.05));
border:1px solid rgba(91,111,240,0.22) !important;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.4);
}
@media (prefers-color-scheme:dark) {
.jours-cycle-card { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05); }
}
.jour-legend-step {
display:inline-flex; align-items:center; gap:5px;
font-size:11.5px; font-weight:500; color: var(--text-primary);
background: var(--bg-primary); padding:4px 9px; border-radius:99px;
border:1px solid var(--border);
}
.jour-legend-arrow { color: var(--text-secondary); font-size:13px; opacity:.55; }
.jour-chip { width:12px; height:12px; border-radius:4px; display:inline-block; flex-shrink:0; }
.jour-chip-pres { background: rgba(45,158,107,0.20); border:1px solid #2d9e6b; }
.jour-chip-tt { background: rgba(6,182,212,0.22); border:1px solid #06b6d4; }
.jour-chip-half { background: rgba(245,158,11,0.22); border:1px solid #f59e0b; }
.jour-chip-off { background: rgba(230,57,70,0.20); border:1px solid #e63946; }
/* Cellules de calendrier — hover en relief */
[data-jour] { transition: transform .12s ease, box-shadow .15s ease; position:relative; }
[data-jour][onclick]:hover {
transform: scale(1.12);
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
z-index:2;
}
/* La métrique télétravail garde sa bande indigo */
.metric.jour-kpi-tt::before { background: linear-gradient(180deg,#06b6d4,#0891b2) !important; }
/* ── ACCENTS PAR PAGE (theming local) ── */
#page-overview { --page-accent:#5b6ff0; --page-accent-2:#8b5cf6; --page-accent-soft:rgba(91,111,240,0.18); }
#page-crypto { --page-accent:#f59e0b; --page-accent-2:#fb7185; --page-accent-soft:rgba(245,158,11,0.20); }
#page-bourse { --page-accent:#10b981; --page-accent-2:#06b6d4; --page-accent-soft:rgba(16,185,129,0.20); }
#page-immo { --page-accent:#06b6d4; --page-accent-2:#10b981; --page-accent-soft:rgba(6,182,212,0.20); }
#page-vehicules,
#page-recommandations,
#page-historique-veh,
#page-opportunites,
#page-bmw-ff { --page-accent:#3b82f6; --page-accent-2:#8b5cf6; --page-accent-soft:rgba(59,130,246,0.20); }
#page-revenus { --page-accent:#10b981; --page-accent-2:#34d399; --page-accent-soft:rgba(16,185,129,0.20); }
#page-epargne { --page-accent:#06b6d4; --page-accent-2:#10b981; --page-accent-soft:rgba(6,182,212,0.20); }
#page-retraite { --page-accent:#f59e0b; --page-accent-2:#fb7185; --page-accent-soft:rgba(245,158,11,0.20); }
#page-emprunts { --page-accent:#e11d48; --page-accent-2:#f59e0b; --page-accent-soft:rgba(225,29,72,0.20); }
#page-charges { --page-accent:#ef4444; --page-accent-2:#fb7185; --page-accent-soft:rgba(239,68,68,0.20); }
#page-creances { --page-accent:#f59e0b; --page-accent-2:#10b981; --page-accent-soft:rgba(245,158,11,0.20); }
#page-compte { --page-accent:#5b6ff0; --page-accent-2:#06b6d4; --page-accent-soft:rgba(91,111,240,0.20); }
#page-paris,
#page-fiabilite,
#page-montante,
#page-pronostics { --page-accent:#8b5cf6; --page-accent-2:#5b6ff0; --page-accent-soft:rgba(139,92,246,0.20); }
#page-portage,
#page-jours,
#page-bilan { --page-accent:#5b6ff0; --page-accent-2:#8b5cf6; --page-accent-soft:rgba(91,111,240,0.20); }
#page-parametres { --page-accent:#64748b; --page-accent-2:#5b6ff0; --page-accent-soft:rgba(100,116,139,0.20); }
.page { --page-accent: var(--accent); --page-accent-2: var(--accent-2); --page-accent-soft: var(--accent-soft); }
/* ── HERO HEADER de chaque page ── */
.page > .page-header {
position:relative;
padding: 8px 0 14px 18px;
margin-bottom: 1.4rem;
border-bottom: 1px solid var(--border);
}
.page > .page-header::before {
content:''; position:absolute; left:0; top:8px; bottom:20px;
width:4px; border-radius: 4px;
background: linear-gradient(180deg, var(--page-accent), var(--page-accent-2));
box-shadow: 0 0 14px var(--page-accent-soft);
}
.page > .page-header h1 {
font-size: 28px; font-weight:700; letter-spacing:-0.022em;
background: linear-gradient(135deg, var(--text-primary) 35%, var(--page-accent) 100%);
-webkit-background-clip:text; background-clip:text; color: transparent;
}
.page > .page-header > .page-header-left p { color: var(--text-secondary); font-size:13.5px; margin-top:6px; }
/* Bande accent par page sur les métriques */
.page .metric::before {
background: linear-gradient(180deg, var(--page-accent), var(--page-accent-2)) !important;
opacity:.95;
}
/* Pastille accent devant les section-title */
.section-title {
display:inline-flex; align-items:center; gap:8px; font-weight:600;
}
.section-title::before {
content:''; width:6px; height:6px; border-radius:50%;
background: linear-gradient(135deg, var(--page-accent,#5b6ff0), var(--page-accent-2,#8b5cf6));
box-shadow: 0 0 8px var(--page-accent-soft);
}
/* Cards qui s'illuminent au hover dans la couleur de page */
.page .card { position:relative; }
.page .card::after {
content:''; position:absolute; top:0; right:0; width:240px; height:120px;
background: radial-gradient(160px 100px at 100% 0%, var(--page-accent-soft) 0%, transparent 70%);
opacity:.4; pointer-events:none; transition: opacity .25s;
border-top-right-radius: var(--radius-lg);
}
.page .card:hover::after { opacity:.85; }
.page .card:hover { border-color: var(--page-accent-soft); }
/* Nav section labels — séparateur élégant */
.sidebar-nav .nav-section-label {
display:flex; align-items:center; gap:10px;
font-size:9.5px;
}
.sidebar-nav .nav-section-label::after {
content:''; flex:1; height:1px;
background: linear-gradient(90deg, rgba(255,255,255,0.10), transparent);
}
/* Onglets inactifs : focus accent par page */
.page .tab.active {
background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2)) !important;
box-shadow: 0 6px 18px var(--page-accent-soft);
}
/* Boutons principaux héritent du thème par page */
.page .add-btn {
background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2));
box-shadow: 0 6px 18px var(--page-accent-soft), inset 0 1px 0 rgba(255,255,255,0.2);
}
.page .add-btn:hover { box-shadow: 0 10px 26px var(--page-accent-soft), inset 0 1px 0 rgba(255,255,255,0.2); }
/* Cartes d'éléments : liseré accent au hover */
.page .veh-card:hover,
.page .fin-card:hover,
.page .paris-card:hover,
.page .opp-card:hover,
.page .cd-card:hover,
.page .cc-solde-card:hover,
.page .ff-card-wrap:hover {
border-color: var(--page-accent-soft) !important;
box-shadow: 0 12px 30px var(--page-accent-soft), 0 2px 6px rgba(15,18,40,0.05);
}
/* Inputs focus utilisent l'accent de page */
.page .form-row input:focus,
.page .form-row select:focus,
.page .portage-input:focus,
.page input[type="text"]:focus,
.page input[type="number"]:focus,
.page input[type="date"]:focus,
.page input[type="email"]:focus,
.page input[type="password"]:focus,
.page select:focus,
.page textarea:focus {
border-color: var(--page-accent) !important;
box-shadow: 0 0 0 3px var(--page-accent-soft) !important;
outline:none;
}
/* Spinner couleur accent */
.prono-spinner { border-top-color: var(--page-accent,#5b6ff0); }
/* Score badges : ombre douce */
.opp-score, .ff-score-badge {
box-shadow: 0 6px 16px rgba(0,0,0,0.10), inset 0 -1px 0 rgba(0,0,0,0.05);
font-weight:800;
}
.opp-score-a, .ff-score-a { background: linear-gradient(135deg, rgba(16,185,129,0.16), rgba(6,182,212,0.16)); color:#047857; }
.opp-score-b, .ff-score-b { background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.16)); color:#a05c0a; }
.opp-score-c, .ff-score-c { background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(225,29,72,0.16)); color:#b91c1c; }
@media (prefers-color-scheme:dark) {
.opp-score-a, .ff-score-a { color:#34d399; }
.opp-score-b, .ff-score-b { color:#fbbf24; }
.opp-score-c, .ff-score-c { color:#fda4af; }
}
/* Vue d'ensemble : grille un peu plus aérée */
#page-overview .ov-grid { gap:1.25rem; }
#page-overview .alerte { backdrop-filter: blur(4px); }
/* Compte courant : sticky header avec ombre subtile */
.cc-table thead { box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
/* Paris : gain/cote en couleur accent */
.paris-cote { color: var(--page-accent,#5b6ff0); }
/* Pronostics — cards plus chaudes */
.prono-card {
background: linear-gradient(180deg, var(--bg-primary), color-mix(in srgb, var(--page-accent-soft) 30%, var(--bg-primary)));
}
.prono-pari-cote { color: var(--page-accent); text-shadow: 0 0 12px var(--page-accent-soft); }
/* Portage — tableaux et inputs lockés */
.lock-btn.locked { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.10)); border-color:#f59e0b66; }
/* Bourse — sparkline-friendly canvas wrapper */
#page-bourse .chart-wrapper, #page-crypto .chart-wrapper {
background:
radial-gradient(400px 200px at 50% 100%, var(--page-accent-soft), transparent 70%),
var(--bg-primary);
border-radius: var(--radius-md);
}
/* Émprunts/Charges/Créances — barres avec gradient page */
.alloc-bar { background: linear-gradient(90deg, var(--page-accent,#5b6ff0), var(--page-accent-2,#8b5cf6)) !important; }
.epargne-bar { background: linear-gradient(90deg, var(--page-accent,#10b981), var(--page-accent-2,#34d399)) !important; }
.emprunt-progress-fill { background: linear-gradient(90deg, var(--page-accent,#e11d48), var(--page-accent-2,#f59e0b)) !important; }
/* Charges — alerte couleur danger */
#page-charges .metric::before { background: linear-gradient(180deg, #ef4444, #fb7185) !important; }
/* Paramètres — section header plus discret */
#page-parametres .param-section h3 {
display:flex; align-items:center; gap:8px;
font-size:14.5px; letter-spacing:-0.005em;
}
/* Veh Card amélioration */
.veh-card-title { letter-spacing:-0.005em; font-size:15.5px; }
.veh-card-plate {
display:inline-block; padding:1px 6px; border-radius:4px;
background: var(--bg-secondary); border:1px solid var(--border);
font-size:11px; font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
}
/* Vue d'ensemble : valeur nette + cash-flow lignes plus lisibles */
.vn-row, .cf-row { padding: 9px 0; }
.vn-total, .cf-total { font-size:16px; }
/* Page-header bouton actions à droite : aligné sur le ribbon */
.page > .page-header > *:not(.page-header-left) { align-self:center; }
/* Animations échelonnées pour les métriques */
@keyframes metricIn {
from { opacity:0; transform: translateY(8px); }
to { opacity:1; transform: translateY(0); }
}
.page.active .metrics > .metric { animation: metricIn .35s ease both; }
.page.active .metrics > .metric:nth-child(2) { animation-delay: .04s; }
.page.active .metrics > .metric:nth-child(3) { animation-delay: .08s; }
.page.active .metrics > .metric:nth-child(4) { animation-delay: .12s; }
.page.active .metrics > .metric:nth-child(5) { animation-delay: .16s; }
.page.active .metrics > .metric:nth-child(6) { animation-delay: .20s; }
.page.active .metrics > .metric:nth-child(7) { animation-delay: .24s; }
.page.active .metrics > .metric:nth-child(8) { animation-delay: .28s; }
/* Mobile : ribbon plus discret */
@media (max-width:700px) {
.page > .page-header { padding-left:14px; }
.page > .page-header h1 { font-size:22px; }
.page > .page-header::before { width:3px; }
.page .card::after { display:none; }
.jour-legend-step { font-size:10.5px; padding:3px 7px; }
}
/* ════════════════════════════════════════════════════════════════════
✦ COMPTE COURANT — tableau de trésorerie premium fintech
════════════════════════════════════════════════════════════════════ */
/* ── Tokens couleurs adaptatifs (light + force-dark + system-dark) ── */
:root {
--cc-pos: #047857;
--cc-neg: #b91c1c;
--cc-amber: #b45309;
--cc-amber-strong: #d97706;
--cc-rec-bg: rgba(16,185,129,0.14);
--cc-dep-bg: rgba(239,68,68,0.12);
--cc-rec-strip: #10b981;
--cc-dep-strip: #ef4444;
--cc-row-hover: rgba(91,111,240,0.06);
--cc-zebra: rgba(0,0,0,0.022);
--cc-section-rec-text: #047857;
--cc-section-dep-text: #b91c1c;
/* Week-end / férié / j20 / dernier ouvré */
--cc-we-bg: rgba(59,130,246,0.10);
--cc-we-text: #2563eb;
--cc-ferie-bg: rgba(251,191,36,0.18);
--cc-ferie-text: #b45309;
--cc-j20-bg-from: rgba(245,158,11,0.16);
--cc-j20-bg-to: rgba(245,158,11,0.06);
--cc-dern-bg-from: rgba(139,92,246,0.16);
--cc-dern-bg-to: rgba(139,92,246,0.06);
--cc-dern-text: #7c3aed;
/* Solde row : très subtil */
--cc-solde-bg: rgba(91,111,240,0.05);
--cc-solde-divider: var(--border-md);
}
@media (prefers-color-scheme:dark) {
:root {
--cc-pos: #34d399;
--cc-neg: #fca5a5;
--cc-amber: #fcd34d;
--cc-amber-strong: #fbbf24;
--cc-rec-bg: rgba(16,185,129,0.16);
--cc-dep-bg: rgba(239,68,68,0.18);
--cc-row-hover: rgba(91,111,240,0.10);
--cc-zebra: rgba(255,255,255,0.025);
--cc-section-rec-text: #34d399;
--cc-section-dep-text: #fca5a5;
--cc-we-bg: rgba(96,165,250,0.14);
--cc-we-text: #93c5fd;
--cc-ferie-bg: rgba(252,211,77,0.20);
--cc-ferie-text: #fde68a;
--cc-j20-bg-from: rgba(245,158,11,0.22);
--cc-j20-bg-to: rgba(245,158,11,0.10);
--cc-dern-bg-from: rgba(139,92,246,0.22);
--cc-dern-bg-to: rgba(139,92,246,0.10);
--cc-dern-text: #c4b5fd;
--cc-solde-bg: rgba(91,111,240,0.08);
}
}
body.force-dark {
--cc-pos: #34d399;
--cc-neg: #fca5a5;
--cc-amber: #fcd34d;
--cc-amber-strong: #fbbf24;
--cc-rec-bg: rgba(16,185,129,0.16);
--cc-dep-bg: rgba(239,68,68,0.18);
--cc-row-hover: rgba(91,111,240,0.10);
--cc-zebra: rgba(255,255,255,0.025);
--cc-section-rec-text: #34d399;
--cc-section-dep-text: #fca5a5;
--cc-we-bg: rgba(96,165,250,0.14);
--cc-we-text: #93c5fd;
--cc-ferie-bg: rgba(252,211,77,0.20);
--cc-ferie-text: #fde68a;
--cc-j20-bg-from: rgba(245,158,11,0.22);
--cc-j20-bg-to: rgba(245,158,11,0.10);
--cc-dern-bg-from: rgba(139,92,246,0.22);
--cc-dern-bg-to: rgba(139,92,246,0.10);
--cc-dern-text: #c4b5fd;
--cc-solde-bg: rgba(91,111,240,0.08);
}
body.force-light {
--cc-pos: #047857;
--cc-neg: #b91c1c;
--cc-amber: #b45309;
--cc-amber-strong: #d97706;
--cc-rec-bg: rgba(16,185,129,0.14);
--cc-dep-bg: rgba(239,68,68,0.12);
--cc-row-hover: rgba(91,111,240,0.06);
--cc-zebra: rgba(0,0,0,0.022);
--cc-section-rec-text: #047857;
--cc-section-dep-text: #b91c1c;
--cc-we-bg: rgba(59,130,246,0.10);
--cc-we-text: #2563eb;
--cc-ferie-bg: rgba(251,191,36,0.18);
--cc-ferie-text: #b45309;
--cc-j20-bg-from: rgba(245,158,11,0.16);
--cc-j20-bg-to: rgba(245,158,11,0.06);
--cc-dern-bg-from: rgba(139,92,246,0.16);
--cc-dern-bg-to: rgba(139,92,246,0.06);
--cc-dern-text: #7c3aed;
--cc-solde-bg: rgba(91,111,240,0.05);
}
/* Wrapper card : pas de padding, on contrôle l'intérieur */
#page-compte > .card { padding:0 !important; overflow:hidden; box-shadow: var(--shadow-md); max-width:100%; }
#page-compte > .card::after { display:none; }
/* Filet de sécurité : .main est un flex item qui doit pouvoir rétrécir */
.main { min-width: 0; }
/* Le conteneur interne ne doit jamais imposer max-content */
#cc-tresorerie-table { min-width: 0 !important; width: 100%; max-width: 100%; }
#page-compte .cc-table-wrap { max-width: 100%; }
/* ── KPI row en haut — look .metric standard ── */
#page-compte .cc-kpi-row {
grid-template-columns: repeat(auto-fit, minmax(150px,1fr)) !important;
gap: 10px !important;
}
@media (max-width:900px) {
#page-compte .cc-kpi-row { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:520px) {
#page-compte .cc-kpi-row { grid-template-columns: 1fr !important; }
}
/* ── Barre de navigation des mois ── */
#page-compte .cc-monthnav { font-size:12px; }
#page-compte .cc-mois-tab {
font-size: 12px;
padding: 5px 14px;
border-radius: 99px;
font-weight: 500;
}
#page-compte .cc-nav-btn {
padding: 5px 12px; font-size: 12px;
border:1px solid var(--border-md); border-radius:99px;
background: transparent; cursor:pointer;
color: var(--text-secondary);
font-family: inherit; font-weight: 500;
transition: all .15s ease;
}
#page-compte .cc-nav-btn:hover {
border-color: var(--page-accent);
color: var(--page-accent);
background: var(--page-accent-soft);
transform: translateY(-1px);
}
#page-compte .cc-nav-add { color: #10b981; border-color: rgba(16,185,129,0.4); }
#page-compte .cc-nav-add:hover { color:#fff; background: linear-gradient(135deg,#10b981,#059669); border-color: transparent; }
#page-compte .cc-nav-del { color: #ef4444; border-color: rgba(239,68,68,0.4); }
#page-compte .cc-nav-del:hover { color:#fff; background: linear-gradient(135deg,#ef4444,#dc2626); border-color: transparent; }
#page-compte .cc-nav-line {
background: var(--grad-accent); color:#fff; border-color: transparent;
box-shadow: 0 4px 12px var(--page-accent-soft);
}
#page-compte .cc-nav-line:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--page-accent-soft); }
/* ── Wrapper de scroll horizontal ── */
#page-compte .cc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
#page-compte .cc-table-wrap::-webkit-scrollbar { height:8px; }
#page-compte .cc-table-wrap::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, var(--page-accent), var(--page-accent-2));
border-radius: 99px;
}
#page-compte .cc-half-sep {
height: 18px;
background: var(--bg-secondary);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* ── La table : layout fixe pour colonnes égales ── */
#page-compte .cc-table.cc-table-fixed {
table-layout: fixed !important;
width: 100% !important;
min-width: 900px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
background: var(--bg-primary);
}
#page-compte .cc-col-label { width: 160px; }
#page-compte .cc-col-day { width: auto; }
/* La colonne label reste collée à gauche au scroll horizontal */
#page-compte .cc-table thead th.cc-label-col,
#page-compte .cc-table tbody td.cc-label-col {
position: sticky;
left: 0;
z-index: 2;
}
#page-compte .cc-table thead th.cc-label-col { z-index: 6; }
#page-compte .cc-table tbody td.cc-label-col { z-index: 2; }
/* Ombre douce à droite de la sticky col pour la séparer */
#page-compte .cc-table thead th.cc-label-col,
#page-compte .cc-table tbody td.cc-label-col {
box-shadow: 1px 0 0 var(--border);
}
/* ── Header (jours du mois) ── */
#page-compte .cc-table thead th {
background: var(--bg-secondary) !important;
color: var(--text-secondary);
padding: 9px 4px;
border:none;
border-bottom: 1px solid var(--border-md);
text-align: center;
vertical-align: middle;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
font-weight: 600;
font-size: 11px;
white-space: normal;
}
#page-compte .cc-table thead th.cc-label-col {
text-align: left !important;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 10px;
color: var(--text-secondary);
padding-left: 14px;
}
#page-compte .cc-day-num {
display:inline-block; width:100%; cursor:pointer;
font-weight: 700; font-size: 12.5px; user-select:none;
color: var(--text-primary);
}
#page-compte .cc-th-dow {
display:block; font-size:9.5px; font-weight:500;
opacity:.55; margin-top:2px; letter-spacing:0.04em; text-transform:uppercase;
}
#page-compte .cc-th-badge {
display:block; font-size:8.5px; opacity:.85; font-weight:500;
margin-top:1px; letter-spacing: 0.03em;
}
/* Variantes spéciales d'en-têtes — tokens adaptatifs */
#page-compte .cc-table thead th.cc-th-we {
background: var(--cc-we-bg) !important;
}
#page-compte .cc-table thead th.cc-th-we .cc-day-num,
#page-compte .cc-table thead th.cc-th-we .cc-th-dow { color: var(--cc-we-text); opacity:.85; }
#page-compte .cc-table thead th.cc-th-ferie {
background: var(--cc-ferie-bg) !important;
}
#page-compte .cc-table thead th.cc-th-ferie .cc-day-num,
#page-compte .cc-table thead th.cc-th-ferie .cc-th-dow,
#page-compte .cc-table thead th.cc-th-ferie .cc-th-badge { color: var(--cc-ferie-text); }
#page-compte .cc-table thead th.cc-th-j20 {
background: linear-gradient(180deg, var(--cc-j20-bg-from), var(--cc-j20-bg-to)) !important;
}
#page-compte .cc-table thead th.cc-th-j20 .cc-day-num,
#page-compte .cc-table thead th.cc-th-j20 .cc-th-dow,
#page-compte .cc-table thead th.cc-th-j20 .cc-th-badge-j20 { color: var(--cc-amber-strong); }
#page-compte .cc-table thead th.cc-th-dernier {
background: linear-gradient(180deg, var(--cc-dern-bg-from), var(--cc-dern-bg-to)) !important;
}
#page-compte .cc-table thead th.cc-th-dernier .cc-day-num,
#page-compte .cc-table thead th.cc-th-dernier .cc-th-dow,
#page-compte .cc-table thead th.cc-th-dernier .cc-th-badge-dern { color: var(--cc-dern-text); }
/* ── Lignes éditables (recettes/dépenses) — version compacte ── */
#page-compte .cc-table tbody td {
padding: 0;
border:none;
border-bottom: 1px solid var(--border);
font-size: 11.5px;
font-weight: 500;
color: var(--text-primary);
vertical-align: middle;
text-align: right;
background: var(--bg-primary);
position: relative;
line-height: 1.1;
}
#page-compte .cc-table tbody td.cc-label-col {
text-align: left;
padding: 4px 10px 4px 14px;
font-weight: 600;
letter-spacing: -0.005em;
background: var(--bg-primary);
border-right: 1px solid var(--border);
}
/* Teintes de colonne : weekend / férié — visibles aussi dans le corps de tableau */
#page-compte .cc-table .cc-col-we { background-color: var(--cc-we-bg); }
#page-compte .cc-table .cc-col-ferie { background-color: var(--cc-ferie-bg); }
/* Le label-col reste blanc, les cellules de jour héritent du */
#page-compte .cc-table tbody tr:not(.cc-solde-row) td:not(.cc-label-col) {
background: transparent;
}
/* Léger zébrage sur le label uniquement */
#page-compte .cc-line:nth-child(even) td.cc-label-col {
background: color-mix(in srgb, var(--bg-secondary) 50%, var(--bg-primary));
}
#page-compte .cc-line:hover td {
background: var(--cc-row-hover) !important;
}
/* Recette / dépense — accent latéral discret + sticky-shadow droite */
#page-compte .cc-line-rec td.cc-label-col {
box-shadow: inset 3px 0 0 var(--cc-rec-strip), 1px 0 0 var(--border);
}
#page-compte .cc-line-dep td.cc-label-col {
box-shadow: inset 3px 0 0 var(--cc-dep-strip), 1px 0 0 var(--border);
}
#page-compte .cc-line-rec .cc-line-name { color: var(--text-primary); }
#page-compte .cc-line-dep .cc-line-name { color: var(--text-primary); }
/* Contrôles sur la ligne */
#page-compte .cc-line-controls {
display:flex; align-items:center; gap:4px;
min-width:0; line-height:1;
}
#page-compte .cc-mv {
border:none; background:none; cursor:pointer;
font-size:9.5px; padding:2px 3px; line-height:1;
color: var(--text-secondary);
border-radius: 4px;
transition: color .12s, background .12s, transform .12s;
}
#page-compte .cc-mv:hover { color: var(--page-accent); background: var(--page-accent-soft); transform: translateY(-1px); }
#page-compte .cc-mv.cc-del:hover { color: #ef4444; background: rgba(239,68,68,0.10); }
#page-compte .cc-mv.disabled { opacity:.18; pointer-events:none; }
#page-compte .cc-line-name {
flex:1; min-width:0;
font-size: 11.5px; line-height: 1.15;
white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
font-weight: 600; color: var(--text-primary);
}
/* ── Cellules éditables — hover/focus sobres ── */
#page-compte .cc-cell-edit { cursor: text; transition: background .12s; }
#page-compte .cc-cell-edit:hover {
background: var(--cc-row-hover) !important;
}
#page-compte .cc-cell-edit:focus-within {
background: var(--cc-row-hover) !important;
}
/* Soulignement fin sous l'input en focus, comme un caret de cellule */
#page-compte .cc-input:focus,
#page-compte .cc-input-solde:focus {
box-shadow: inset 0 -1.5px 0 var(--page-accent);
outline: none;
}
/* ── Inputs dans les cellules — plus compacts ── */
#page-compte .cc-input,
#page-compte .cc-input-solde {
width: 100%;
background: transparent;
border: none; outline: none;
text-align: right;
padding: 5px 14px 5px 4px;
margin: 0; box-sizing: border-box;
font-size: 11.5px; font-weight: 600;
font-family: inherit;
font-variant-numeric: tabular-nums;
color: inherit;
line-height: 1.15;
}
#page-compte .cc-input-rec { color: var(--cc-pos); font-weight: 700; }
#page-compte .cc-input-dep { color: var(--cc-neg); font-weight: 700; }
/* Solde dispo : valeur en couleur principale (blanc en thème sombre, noir en clair) */
#page-compte .cc-input-solde { color: var(--text-primary); font-weight: 800; font-size: 12.5px; }
/* Quand l'utilisateur a saisi manuellement le solde, on signale via un accent ambre */
#page-compte .cc-cell-solde.is-manual .cc-input-solde { color: var(--cc-amber-strong); }
#page-compte .cc-input::placeholder {
color: var(--text-secondary);
opacity: .35; font-weight: 500;
}
/* Placeholder du Solde dispo : c'est en réalité le solde calculé automatiquement,
on l'affiche en blanc/primaire et bien lisible (pas en gris) */
#page-compte .cc-input-solde::placeholder {
color: var(--text-primary);
opacity: .92;
font-weight: 700;
}
/* ── € symbol à droite ── */
#page-compte .cc-eur {
position: absolute; right: 5px; top: 50%;
transform: translateY(-50%);
font-size: 9.5px; font-weight: 600;
pointer-events: none;
color: var(--text-secondary);
opacity: .5;
transition: opacity .15s;
}
#page-compte .cc-cell-edit:focus-within .cc-eur { opacity: .85; }
/* ── Section headers Recettes / Dépenses ── */
#page-compte .cc-section-header td {
padding: 8px 14px !important;
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
border:none !important;
border-top: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
text-align: left !important;
}
#page-compte .cc-section-header.cc-sect-rec td {
background: linear-gradient(90deg, var(--cc-rec-bg) 0%, transparent 70%) !important;
color: var(--cc-section-rec-text) !important;
box-shadow: inset 3px 0 0 var(--cc-rec-strip), 1px 0 0 var(--border);
}
#page-compte .cc-section-header.cc-sect-dep td {
background: linear-gradient(90deg, var(--cc-dep-bg) 0%, transparent 70%) !important;
color: var(--cc-section-dep-text) !important;
box-shadow: inset 3px 0 0 var(--cc-dep-strip), 1px 0 0 var(--border);
}
/* ── Lignes SOLDE DISPO (top + bottom) — sobre, sans encadré bleu ── */
#page-compte .cc-solde-row td {
background: var(--cc-solde-bg) !important;
border:none !important;
border-top: 1px solid var(--cc-solde-divider) !important;
border-bottom: 1px solid var(--cc-solde-divider) !important;
font-weight: 700;
font-size: 12.5px;
color: var(--text-primary) !important;
}
#page-compte .cc-solde-row td.cc-label-col {
color: var(--text-secondary) !important;
font-size: 10.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 700;
border-right: 1px solid var(--border) !important;
}
#page-compte .cc-cell-total {
padding: 9px 14px 9px 4px !important;
font-weight: 700;
font-size: 12.5px;
}
/* ── Aujourd'hui — colonne entièrement encadrée en bleu ── */
/* Background tinté sur toute la colonne via le */
#page-compte .cc-table .cc-col-today {
background-color: color-mix(in srgb, var(--page-accent) 8%, transparent) !important;
}
/* Bordures verticales gauche + droite sur chaque cellule de la colonne today */
#page-compte .cc-today {
box-shadow: inset 2px 0 0 var(--page-accent), inset -2px 0 0 var(--page-accent) !important;
position: relative; z-index: 1;
}
/* Bordure supérieure : sur le th du header */
#page-compte .cc-table thead th.cc-today {
background: color-mix(in srgb, var(--page-accent) 14%, var(--bg-secondary)) !important;
box-shadow: inset 2px 0 0 var(--page-accent), inset -2px 0 0 var(--page-accent), inset 0 2px 0 var(--page-accent) !important;
}
#page-compte .cc-table thead th.cc-today .cc-day-num {
color: var(--page-accent);
font-weight: 800;
}
/* Bordure inférieure : sur la dernière cellule (la ligne TOTAL/SOLDE finale) */
#page-compte .cc-table tbody tr:last-child td.cc-today {
box-shadow: inset 2px 0 0 var(--page-accent), inset -2px 0 0 var(--page-accent), inset 0 -2px 0 var(--page-accent) !important;
}
/* ── Valeurs +/− pour la ligne SOLDE finale ── */
#page-compte .cc-pos { color: var(--cc-pos) !important; }
#page-compte .cc-neg { color: var(--cc-neg) !important; }
/* ── Mode confidentialité — préserver le blur ── */
body.privacy #page-compte .cc-input,
body.privacy #page-compte .cc-input-solde,
body.privacy #page-compte .cc-cell-total { filter: blur(5px) !important; }
/* ── Récap / archives ── */
#page-compte #cc-archives-zone .card { padding: 1rem 1.25rem; }
/* ── Mobile ── */
@media (max-width:700px) {
#page-compte .cc-monthnav { padding: 8px 10px; gap:5px; }
#page-compte .cc-mois-tab { font-size:11px; padding: 4px 10px; }
#page-compte .cc-nav-btn { font-size:11px; padding:4px 10px; }
#page-compte .cc-table.cc-table-fixed { min-width: 760px !important; }
#page-compte .cc-col-label { width: 130px; }
#page-compte .cc-input, #page-compte .cc-input-solde { font-size:11px; padding:7px 12px 7px 3px; }
#page-compte .cc-day-num { font-size:11.5px; }
#page-compte .cc-th-dow { font-size:9px; }
}
/* ════════════════════════════════════════════════════════════════════
✦ PRÉVISION 2026 — module portage (refonte)
════════════════════════════════════════════════════════════════════ */
.prev-2026-card { padding: 1.5rem 1.5rem 1.25rem !important; }
.prev-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.prev-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prev-subtitle { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.prev-subtitle em { color: var(--page-accent,#5b6ff0); font-style: normal; font-weight: 600; }
.prev-refresh-btn {
padding: 6px 14px;
background: var(--grad-accent);
color: #fff; border: none; border-radius: var(--radius-md);
font-size: 12px; font-weight: 600; font-family: inherit;
cursor: pointer; white-space: nowrap;
box-shadow: 0 4px 12px rgba(91,111,240,0.30);
transition: transform .15s, box-shadow .22s;
}
.prev-refresh-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(91,111,240,0.42);
}
.prev-header-actions {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.prev-toggle-past {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
font-size: 12px; font-weight: 600;
color: var(--text-secondary);
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 99px;
cursor: pointer;
user-select: none;
transition: border-color .12s, color .12s;
}
.prev-toggle-past:hover { border-color: var(--page-accent, #5b6ff0); color: var(--text-primary); }
.prev-toggle-past input[type="checkbox"] {
width: 14px; height: 14px; margin: 0;
accent-color: var(--page-accent, #5b6ff0);
cursor: pointer;
}
.prev-toggle-past:has(input:checked) {
border-color: var(--page-accent, #5b6ff0);
color: var(--page-accent, #5b6ff0);
background: var(--page-accent-soft);
}
/* KPI row */
#page-portage .prev-kpi-row {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
#page-portage .prev-kpi-gain::before { background: var(--grad-emerald) !important; }
#page-portage .prev-kpi-gain .metric-value { color: var(--success); font-weight: 800; }
/* Table wrapper avec scroll */
.prev-table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-primary);
}
.prev-table-wrap::-webkit-scrollbar { height: 8px; }
.prev-table-wrap::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, var(--page-accent), var(--page-accent-2));
border-radius: 99px;
}
.prev-table {
width: 100%; min-width: 880px;
border-collapse: separate; border-spacing: 0;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Headers */
.prev-table thead th {
padding: 8px 12px;
text-align: left;
background: var(--bg-secondary);
color: var(--text-secondary);
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
border-bottom: 1px solid var(--border-md);
}
.prev-table .prev-supergroup th {
padding: 6px 12px;
font-size: 10px;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border);
}
.prev-table .prev-grp { text-align: center; font-weight: 700; }
.prev-table .prev-grp-saisi { color: var(--cc-pos); }
.prev-table .prev-grp-max { color: var(--page-accent,#5b6ff0); }
.prev-table .prev-grp-empty { background: var(--bg-tertiary); border-bottom: 1px solid var(--border); }
.prev-table .prev-col-num { text-align: right; }
.prev-table .prev-col-tot { color: var(--text-primary) !important; }
.prev-table .prev-col-gain { text-align: right; color: var(--cc-pos) !important; }
/* Rows */
.prev-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
color: var(--text-primary);
vertical-align: middle;
background: var(--bg-primary);
}
.prev-table tbody tr:nth-child(even) td {
background: color-mix(in srgb, var(--bg-secondary) 50%, var(--bg-primary));
}
.prev-table .prev-row { transition: background .12s; }
.prev-table .prev-row:hover td {
background: var(--cc-row-hover) !important;
}
.prev-table .prev-num { text-align: right; font-weight: 600; }
.prev-table .prev-cell-mois {
font-weight: 700;
letter-spacing: -0.005em;
white-space: nowrap;
position: relative;
padding-left: 14px;
}
.prev-now-dot {
display: inline-block; width: 7px; height: 7px;
border-radius: 50%;
background: var(--page-accent,#5b6ff0);
box-shadow: 0 0 8px var(--page-accent,#5b6ff0);
margin-right: 6px;
vertical-align: middle;
animation: prev-pulse 2s ease-in-out infinite;
}
@keyframes prev-pulse {
0%, 100% { box-shadow: 0 0 6px var(--page-accent,#5b6ff0); }
50% { box-shadow: 0 0 14px var(--page-accent,#5b6ff0); }
}
.prev-tag-past, .prev-tag-now {
display: inline-block;
font-size: 9.5px; font-weight: 600;
padding: 1px 7px; border-radius: 99px;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
margin-left: 4px;
}
.prev-tag-past { background: var(--bg-tertiary); color: var(--text-secondary); }
.prev-tag-now { background: var(--page-accent-soft); color: var(--page-accent,#5b6ff0); }
/* Past month — légère transparence */
.prev-table .prev-past td { opacity: 0.55; }
.prev-table .prev-past:hover td { opacity: 0.95; }
/* Current month — encadré entièrement en vert */
.prev-table .prev-current td {
background: linear-gradient(180deg,
color-mix(in srgb, var(--cc-pos) 18%, var(--bg-primary)),
color-mix(in srgb, var(--cc-pos) 8%, var(--bg-primary))) !important;
font-weight: 600;
box-shadow:
inset 0 2px 0 var(--cc-pos),
inset 0 -2px 0 var(--cc-pos);
border-bottom-color: var(--cc-pos) !important;
}
.prev-table .prev-current td:first-child {
box-shadow:
inset 2px 0 0 var(--cc-pos),
inset 0 2px 0 var(--cc-pos),
inset 0 -2px 0 var(--cc-pos);
}
.prev-table .prev-current td:last-child {
box-shadow:
inset -2px 0 0 var(--cc-pos),
inset 0 2px 0 var(--cc-pos),
inset 0 -2px 0 var(--cc-pos);
}
.prev-table .prev-current td.prev-cell-mois { color: var(--cc-pos); }
/* Empty rows */
.prev-table .prev-empty td { opacity: 0.5; }
.prev-table .prev-empty-cell {
text-align: center !important;
font-style: italic;
color: var(--text-secondary);
letter-spacing: 0.02em;
}
/* Mini-bar dans la colonne Jours */
.prev-cell-jours { padding: 8px 12px; }
.prev-jours-wrap {
display: flex; flex-direction: column; gap: 4px;
min-width: 60px;
}
.prev-jours-num { font-weight: 800; font-size: 13px; line-height: 1; }
.prev-jours-bar {
display: block; height: 4px;
background: var(--bg-secondary);
border-radius: 99px; overflow: hidden;
position: relative;
}
.prev-jours-fill {
display: block; height: 100%;
border-radius: 99px;
transition: width .35s ease;
}
/* Colonnes spéciales */
.prev-table .prev-frais { color: var(--page-accent,#5b6ff0); font-weight: 600; }
.prev-table .prev-tot {
font-weight: 800;
letter-spacing: -0.005em;
}
.prev-table .prev-tot-saisi { color: var(--cc-pos); }
.prev-table .prev-tot-max { color: var(--page-accent,#5b6ff0); }
.prev-table .prev-gain {
font-weight: 700;
color: var(--cc-pos);
}
.prev-fp-max {
font-size: 10px;
color: var(--text-secondary);
font-weight: 500;
margin-top: 2px;
}
/* Colonne recommandation d'investissement */
.prev-table .prev-reco {
color: var(--page-accent,#5b6ff0);
font-weight: 700;
}
.prev-reco-split {
font-size: 10px;
color: var(--text-secondary);
font-weight: 500;
margin-top: 2px;
letter-spacing: 0.01em;
}
/* Barre de configuration des paramètres : groupes éditables */
.prev-config-wrap {
display: flex;
flex-direction: column;
gap: 12px;
margin: 14px 0 1.25rem;
}
.prev-config-group {
padding: 12px 16px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md, 10px);
}
.prev-config-group-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.prev-config-group-head > span:first-child {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--page-accent, #5b6ff0);
}
.prev-config-group-head > small {
font-size: 11px;
color: var(--text-secondary);
opacity: 0.85;
}
.prev-config-total {
margin-left: auto;
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 99px;
padding: 2px 10px;
}
.prev-config-grid {
display: grid;
gap: 10px;
}
.prev-config-grid-fp { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.prev-config-grid-wawa { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.prev-config-grid-vie { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.prev-config-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.prev-config-item > label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-secondary);
}
.prev-config-item > label small {
text-transform: none;
letter-spacing: 0;
font-weight: 500;
color: var(--text-tertiary, var(--text-secondary));
}
.prev-config-item > small {
font-size: 11px;
color: var(--text-tertiary, var(--text-secondary));
opacity: 0.8;
}
.prev-config-input {
display: flex;
align-items: center;
gap: 6px;
background: var(--bg-primary);
border: 1px solid var(--border-md, var(--border));
border-radius: 8px;
padding: 6px 10px;
transition: border-color .15s, box-shadow .15s;
}
.prev-config-input:focus-within {
border-color: var(--page-accent, #5b6ff0);
box-shadow: 0 0 0 3px var(--page-accent-soft);
}
.prev-config-input input {
flex: 1;
width: 100%;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
padding: 0;
}
.prev-config-input span {
font-size: 12.5px;
color: var(--text-secondary);
font-weight: 600;
}
/* Barre de progression de l'épargne de sécurité (KPI) */
.prev-emerg-bar {
height: 5px;
background: var(--bg-tertiary);
border-radius: 99px;
overflow: hidden;
margin: 6px 0 4px;
}
.prev-emerg-fill {
height: 100%;
background: linear-gradient(90deg, var(--cc-pos), color-mix(in srgb, var(--cc-pos) 70%, var(--page-accent)));
border-radius: 99px;
transition: width .35s ease;
}
/* ════════════════════════════════════════════════════════
PAGE MONTANTE — design system dédié
════════════════════════════════════════════════════════ */
.mt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 14px;
}
.mt-card {
position: relative;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 18px 14px 22px;
cursor: pointer;
transition: transform .14s, box-shadow .14s, border-color .14s;
overflow: hidden;
}
.mt-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,0,0,0.08);
border-color: color-mix(in srgb, var(--page-accent) 40%, var(--border));
}
/* Bandeau coloré gauche selon statut */
.mt-card-stripe {
position: absolute; top: 0; left: 0; bottom: 0;
width: 4px;
background: var(--page-accent, #5b6ff0);
}
.mt-card-encours .mt-card-stripe { background: var(--page-accent, #5b6ff0); }
.mt-card-relance .mt-card-stripe { background: #f59e0b; }
.mt-card-atteint .mt-card-stripe { background: var(--cc-pos); }
.mt-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 10px; margin-bottom: 12px;
}
.mt-card-titre { min-width: 0; flex: 1; }
.mt-card-nom {
font-size: 15px; font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-card-meta {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 4px;
font-size: 11px; color: var(--text-secondary);
}
.mt-card-meta strong { color: var(--text-primary); font-weight: 700; }
.mt-card-strat {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 8px;
background: var(--bg-secondary);
border-radius: 99px;
font-weight: 600;
}
.mt-card-strat-icon {
font-size: 10px;
color: var(--page-accent, #5b6ff0);
}
.mt-card-actions {
display: flex; align-items: center; gap: 6px;
flex-shrink: 0;
}
.mt-status-pill {
font-size: 10.5px; font-weight: 700;
padding: 3px 10px;
border-radius: 99px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.mt-status-encours { background: color-mix(in srgb, var(--page-accent) 14%, var(--bg-primary)); color: var(--page-accent, #5b6ff0); }
.mt-status-relance { background: color-mix(in srgb, #f59e0b 18%, var(--bg-primary)); color: #c2740a; }
.mt-status-atteint { background: color-mix(in srgb, var(--cc-pos) 18%, var(--bg-primary)); color: var(--cc-pos); }
.mt-icon-btn {
width: 26px; height: 26px;
border-radius: 6px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font-size: 12px;
transition: border-color .12s, color .12s, background .12s;
}
.mt-icon-btn:hover {
border-color: var(--page-accent, #5b6ff0);
color: var(--page-accent, #5b6ff0);
background: var(--page-accent-soft);
}
.mt-icon-btn-del:hover {
border-color: var(--cc-neg);
color: var(--cc-neg);
background: color-mix(in srgb, var(--cc-neg) 12%, var(--bg-primary));
}
.mt-card-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 10px 0;
margin-bottom: 10px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.mt-stat {
text-align: center;
padding: 2px 4px;
}
.mt-stat-label {
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 2px;
}
.mt-stat-value {
font-size: 15px; font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.mt-stat-value.pos { color: var(--cc-pos); }
.mt-stat-value.neg { color: var(--cc-neg); }
.mt-stat-sub { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }
.mt-card-progress { margin-bottom: 6px; }
.mt-progress-track {
height: 6px;
background: var(--bg-secondary);
border-radius: 99px;
overflow: hidden;
}
.mt-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--cc-pos), color-mix(in srgb, var(--cc-pos) 60%, var(--page-accent)));
border-radius: 99px;
transition: width .35s ease;
}
.mt-progress-meta {
display: flex; justify-content: space-between;
font-size: 11px; color: var(--text-secondary);
margin-top: 4px;
}
.mt-progress-meta strong {
color: var(--cc-pos);
font-variant-numeric: tabular-nums;
}
.mt-card-progress-empty {
padding: 6px 0;
font-size: 11px; color: var(--text-secondary);
}
.mt-mini-link {
background: none; border: none;
color: var(--page-accent, #5b6ff0);
cursor: pointer;
font-size: 11px; font-weight: 600;
text-decoration: underline;
padding: 0;
}
.mt-card-suggest {
margin-top: 8px;
padding: 8px 12px;
background: color-mix(in srgb, var(--page-accent) 8%, var(--bg-primary));
border: 1px dashed color-mix(in srgb, var(--page-accent) 40%, var(--border));
border-radius: 8px;
font-size: 11.5px;
color: var(--text-secondary);
display: flex; justify-content: space-between; align-items: center;
}
.mt-card-suggest strong {
color: var(--page-accent, #5b6ff0);
font-size: 13px;
}
.mt-card-suggest-arrow { color: var(--page-accent, #5b6ff0); }
/* État vide */
.mt-empty {
text-align: center;
padding: 3rem 1rem;
}
.mt-empty-icon { font-size: 36px; margin-bottom: 12px; }
.mt-empty-title {
font-size: 16px; font-weight: 700; color: var(--text-primary);
margin-bottom: 6px;
}
.mt-empty-sub {
font-size: 13px; color: var(--text-secondary);
max-width: 420px; margin: 0 auto;
line-height: 1.5;
}
/* Modal Montante : sections */
.mt-modal-sub {
font-size: 12.5px;
color: var(--text-secondary);
margin: 0 0 16px;
line-height: 1.45;
}
.mt-modal-section {
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.mt-modal-section:last-of-type { border-bottom: none; padding-bottom: 4px; }
.mt-modal-section-title {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 8px;
}
.mt-strategie-choice {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.mt-strategie-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 6px;
background: var(--bg-secondary);
border: 1.5px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: border-color .12s, background .12s;
text-align: center;
}
.mt-strategie-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mt-strategie-card:hover { border-color: var(--page-accent, #5b6ff0); }
.mt-strategie-card:has(input:checked) {
border-color: var(--page-accent, #5b6ff0);
background: var(--page-accent-soft);
}
.mt-strategie-icon {
font-size: 18px; font-weight: 800;
color: var(--page-accent, #5b6ff0);
}
.mt-strategie-name {
font-size: 12px; font-weight: 700;
color: var(--text-primary);
}
.mt-strategie-desc {
font-size: 10px;
color: var(--text-secondary);
}
.mt-preview-box {
margin-top: 10px;
padding: 12px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
}
.mt-preview-title {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 8px;
}
/* ────── Impôt sur le revenu YTD (page Revenus) ────── */
#rev-ir-ytd-card {
padding: 18px 20px;
}
.ir-ytd-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.ir-ytd-title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.ir-ytd-sub {
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
}
.ir-ytd-total {
text-align: right;
}
.ir-ytd-total-value {
font-size: 24px;
font-weight: 800;
color: var(--cc-neg);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.ir-ytd-total-sub {
display: flex;
gap: 6px;
justify-content: flex-end;
margin-top: 4px;
flex-wrap: wrap;
}
.ir-ytd-tag {
font-size: 10.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 99px;
}
.ir-ytd-tag-saisi { background: color-mix(in srgb, var(--page-accent, #5b6ff0) 16%, var(--bg-primary)); color: var(--page-accent, #5b6ff0); }
.ir-ytd-tag-real { background: color-mix(in srgb, var(--cc-pos) 14%, var(--bg-primary)); color: var(--cc-pos); }
.ir-ytd-tag-est { background: color-mix(in srgb, #f59e0b 18%, var(--bg-primary)); color: #c2740a; }
/* Bandeau de solde : payé vs dû + taux recommandé */
.ir-ytd-solde {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
margin: 14px 0 16px;
}
.ir-ytd-solde-card {
padding: 12px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
border-left: 3px solid var(--border);
}
.ir-ytd-solde-due { border-left-color: var(--text-secondary); }
.ir-ytd-solde-rate { border-left-color: var(--page-accent, #5b6ff0); }
.ir-ytd-solde-annual { border-left-color: #6b7280; }
.ir-ytd-solde-diff-over { border-left-color: var(--cc-pos); background: color-mix(in srgb, var(--cc-pos) 7%, var(--bg-secondary)); }
.ir-ytd-solde-diff-under { border-left-color: var(--cc-neg); background: color-mix(in srgb, var(--cc-neg) 7%, var(--bg-secondary)); }
.ir-ytd-solde-diff-neutral { border-left-color: var(--text-secondary); }
.ir-ytd-solde-label {
font-size: 10px; font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 4px;
}
.ir-ytd-solde-value {
font-size: 19px; font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.ir-ytd-solde-diff-over .ir-ytd-solde-value { color: var(--cc-pos); }
.ir-ytd-solde-diff-under .ir-ytd-solde-value { color: var(--cc-neg); }
.ir-ytd-solde-rate .ir-ytd-solde-value { color: var(--page-accent, #5b6ff0); }
.ir-ytd-solde-sub {
font-size: 11px;
color: var(--text-secondary);
margin-top: 2px;
}
.ir-ytd-rows {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
}
.ir-ytd-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 12px;
background: var(--bg-secondary);
border-radius: 8px;
font-size: 12.5px;
}
.ir-ytd-row-mois { font-weight: 700; color: var(--text-primary); flex: 1; }
.ir-ytd-row-src {
font-size: 10px;
letter-spacing: 0.04em;
color: var(--text-secondary);
font-weight: 600;
}
.ir-ytd-row-amt {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
min-width: 60px;
text-align: right;
}
/* Champ d'édition inline du montant payé */
.ir-ytd-row-edit {
display: flex;
align-items: center;
gap: 4px;
}
.ir-ytd-row-input {
width: 70px;
padding: 4px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 12.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
transition: border-color .12s, box-shadow .12s, background .12s;
}
.ir-ytd-row-input:hover { border-color: var(--page-accent, #5b6ff0); }
.ir-ytd-row-input:focus {
outline: none;
border-color: var(--page-accent, #5b6ff0);
box-shadow: 0 0 0 3px var(--page-accent-soft);
}
.ir-ytd-row-input::placeholder {
color: var(--text-secondary);
opacity: 0.45;
font-weight: 500;
}
.ir-ytd-row-input-saisi {
border-color: var(--page-accent, #5b6ff0);
background: var(--page-accent-soft);
color: var(--page-accent, #5b6ff0);
}
.ir-ytd-row-eur {
font-size: 11.5px;
color: var(--text-secondary);
font-weight: 600;
}
.ir-ytd-row-reset {
width: 22px; height: 22px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-primary);
color: var(--text-secondary);
cursor: pointer;
font-size: 11px;
line-height: 1;
transition: border-color .12s, color .12s;
}
.ir-ytd-row-reset:hover {
border-color: var(--page-accent, #5b6ff0);
color: var(--page-accent, #5b6ff0);
}
.ir-ytd-row-src-saisi { border-left: 3px solid var(--page-accent, #5b6ff0); }
.ir-ytd-row-src-historique { border-left: 3px solid var(--cc-pos); }
.ir-ytd-row-src-estimation { border-left: 3px solid #f59e0b; }
.ir-ytd-row-src-aucun {
border-left: 3px solid var(--border);
opacity: 0.55;
}
.ir-ytd-row-src-aucun .ir-ytd-row-amt { color: var(--text-secondary); }
.ir-ytd-foot {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
color: var(--text-secondary);
font-size: 11px;
}
.ir-ytd-legend {
display: inline-block;
padding: 1px 7px;
border-radius: 99px;
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.02em;
}
.ir-ytd-legend-saisi { background: var(--page-accent-soft); color: var(--page-accent, #5b6ff0); }
.ir-ytd-legend-hist { background: color-mix(in srgb, var(--cc-pos) 14%, var(--bg-primary)); color: var(--cc-pos); }
.ir-ytd-legend-est { background: color-mix(in srgb, #f59e0b 18%, var(--bg-primary)); color: #c2740a; }
/* Couleurs des sous-allocations dans la colonne reco */
.prev-reco-emerg { color: var(--cc-pos); font-weight: 600; }
.prev-reco-pea { color: var(--page-accent, #5b6ff0); font-weight: 600; }
.prev-reco-crypto { color: #f59e0b; font-weight: 600; }
/* Colonne "Reste à vivre" — input éditable inline */
.prev-table .prev-cell-rav {
position: relative;
padding-right: 8px;
}
.prev-cell-rav-input {
width: 100%;
max-width: 110px;
padding: 6px 8px;
border: 1px solid var(--border-md, var(--border));
border-radius: 6px;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.prev-cell-rav-input:hover {
border-color: var(--page-accent, #5b6ff0);
}
.prev-cell-rav-input:focus {
outline: none;
border-color: var(--page-accent, #5b6ff0);
box-shadow: 0 0 0 3px var(--page-accent-soft);
background: var(--bg-primary);
}
.prev-cell-rav-input.prev-cell-rav-edited {
border-color: var(--cc-pos);
background: color-mix(in srgb, var(--cc-pos) 6%, var(--bg-primary));
}
.prev-cell-rav-reset {
margin-left: 4px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-primary);
color: var(--text-secondary);
cursor: pointer;
font-size: 12px;
line-height: 1;
vertical-align: middle;
transition: border-color .12s, color .12s;
}
.prev-cell-rav-reset:hover {
border-color: var(--cc-pos);
color: var(--cc-pos);
}
/* Cellule "Dispo invest." — clic = breakdown */
.prev-table .prev-cell-dispo {
cursor: pointer;
position: relative;
transition: background .12s;
}
.prev-table .prev-cell-dispo:hover {
background: color-mix(in srgb, var(--page-accent) 10%, var(--bg-primary)) !important;
}
.prev-cell-dispo-icon {
display: inline-block;
margin-left: 4px;
font-size: 10px;
color: var(--text-secondary);
opacity: 0.6;
transition: opacity .12s, transform .12s;
}
.prev-table .prev-cell-dispo:hover .prev-cell-dispo-icon {
opacity: 1;
transform: translate(2px, -2px);
}
/* ────── Modal Ventilation Dispo Investissement ────── */
.prev-dispo-modal { padding: 0; overflow: hidden; }
#prev-dispo-body, .prev-dispo-section { min-width: 0; max-width: 100%; }
.prev-dispo-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 12px;
border-bottom: 1px solid var(--border);
}
.prev-dispo-head h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
}
.prev-dispo-close {
background: none;
border: none;
font-size: 22px;
line-height: 1;
color: var(--text-secondary);
cursor: pointer;
padding: 0 4px;
}
.prev-dispo-close:hover { color: var(--text-primary); }
#prev-dispo-body { padding: 14px 22px 22px; }
.prev-dispo-section { margin-bottom: 18px; }
.prev-dispo-section:last-child { margin-bottom: 0; }
.prev-dispo-section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.prev-dispo-mode-tag {
font-size: 10px;
padding: 2px 8px;
border-radius: 99px;
background: var(--page-accent-soft);
color: var(--page-accent, #5b6ff0);
letter-spacing: 0.04em;
}
.prev-dispo-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
font-size: 13.5px;
border-bottom: 1px dashed var(--border);
}
.prev-dispo-row:last-child { border-bottom: none; }
.prev-dispo-row-label { color: var(--text-secondary); }
.prev-dispo-row-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.prev-dispo-row-value.neg { color: var(--cc-neg); }
.prev-dispo-row-value.pos { color: var(--text-primary); }
.prev-dispo-row-result {
margin-top: 6px;
padding-top: 12px;
border-top: 1.5px solid var(--page-accent, #5b6ff0) !important;
border-bottom: none;
font-size: 14.5px;
}
.prev-dispo-row-result .prev-dispo-row-label {
color: var(--text-primary);
font-weight: 700;
}
.prev-dispo-row-result .prev-dispo-row-value {
font-size: 17px;
font-weight: 800;
}
.prev-dispo-row-result .prev-dispo-row-value.pos { color: var(--cc-pos); }
.prev-dispo-aloc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.prev-dispo-aloc {
padding: 10px 6px;
border-radius: 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
text-align: center;
min-width: 0;
overflow: hidden;
}
.prev-dispo-aloc-emerg { border-left: 3px solid var(--cc-pos); }
.prev-dispo-aloc-pea { border-left: 3px solid var(--page-accent, #5b6ff0); }
.prev-dispo-aloc-crypto { border-left: 3px solid #f59e0b; }
.prev-dispo-aloc-icon { font-size: 20px; margin-bottom: 2px; line-height: 1; }
.prev-dispo-aloc-name {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prev-dispo-aloc-amount {
font-size: 18px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.prev-dispo-aloc-emerg .prev-dispo-aloc-amount { color: var(--cc-pos); }
.prev-dispo-aloc-pea .prev-dispo-aloc-amount { color: var(--page-accent, #5b6ff0); }
.prev-dispo-aloc-crypto .prev-dispo-aloc-amount { color: #f59e0b; }
/* Inputs éditables des allocations */
.prev-dispo-aloc-edit {
display: flex;
align-items: baseline;
justify-content: center;
gap: 3px;
margin: 2px 0;
min-width: 0;
}
.prev-dispo-aloc-input {
width: 100%;
max-width: 78px;
min-width: 0;
padding: 4px 6px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 15px;
font-weight: 800;
font-variant-numeric: tabular-nums;
text-align: right;
transition: border-color .15s, box-shadow .15s;
}
.prev-dispo-aloc-emerg .prev-dispo-aloc-input { color: var(--cc-pos); }
.prev-dispo-aloc-pea .prev-dispo-aloc-input { color: var(--page-accent, #5b6ff0); }
.prev-dispo-aloc-crypto .prev-dispo-aloc-input { color: #f59e0b; }
.prev-dispo-aloc-input:hover { border-color: var(--text-secondary); }
.prev-dispo-aloc-input:focus {
outline: none;
border-color: var(--page-accent, #5b6ff0);
box-shadow: 0 0 0 3px var(--page-accent-soft);
}
.prev-dispo-aloc-emerg .prev-dispo-aloc-input:focus { border-color: var(--cc-pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-pos) 25%, transparent); }
.prev-dispo-aloc-crypto .prev-dispo-aloc-input:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.prev-dispo-aloc-input::-webkit-inner-spin-button,
.prev-dispo-aloc-input::-webkit-outer-spin-button { opacity: 0.4; }
.prev-dispo-aloc-unit {
font-size: 14px;
color: var(--text-secondary);
font-weight: 700;
}
.prev-dispo-aloc-sub {
font-size: 10px;
color: var(--text-secondary);
margin-top: 4px;
opacity: 0.85;
line-height: 1.3;
word-break: break-word;
}
/* Mode tag manuel/auto */
.prev-dispo-mode-tag.prev-dispo-mode-auto { background: var(--page-accent-soft); color: var(--page-accent, #5b6ff0); }
.prev-dispo-mode-tag.prev-dispo-mode-manuel {
background: color-mix(in srgb, #f59e0b 22%, var(--bg-primary));
color: #c2740a;
}
.prev-dispo-reset-btn {
margin-left: auto;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: 99px;
background: var(--bg-primary);
color: var(--text-secondary);
cursor: pointer;
transition: border-color .12s, color .12s;
}
.prev-dispo-reset-btn:hover {
border-color: var(--page-accent, #5b6ff0);
color: var(--page-accent, #5b6ff0);
}
/* Résumé sous la barre */
.prev-dispo-aloc-summary {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
font-size: 12px;
color: var(--text-secondary);
}
.prev-dispo-aloc-summary strong {
color: var(--text-primary);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.prev-dispo-aloc-delta {
margin-left: auto;
padding: 2px 10px;
border-radius: 99px;
font-weight: 700;
font-size: 11.5px;
}
.prev-dispo-aloc-delta.under { background: color-mix(in srgb, #f59e0b 18%, var(--bg-primary)); color: #c2740a; }
.prev-dispo-aloc-delta.over { background: color-mix(in srgb, var(--cc-neg) 18%, var(--bg-primary)); color: var(--cc-neg); }
.prev-dispo-aloc-delta.ok { background: color-mix(in srgb, var(--cc-pos) 18%, var(--bg-primary)); color: var(--cc-pos); }
.prev-dispo-aloc-bar {
display: flex;
height: 7px;
background: var(--bg-tertiary);
border-radius: 99px;
overflow: hidden;
margin-top: 6px;
}
.prev-dispo-aloc-seg { display: block; height: 100%; }
.prev-dispo-aloc-seg.seg-em { background: var(--cc-pos); }
.prev-dispo-aloc-seg.seg-pea { background: var(--page-accent, #5b6ff0); }
.prev-dispo-aloc-seg.seg-crypto { background: #f59e0b; }
.prev-dispo-warning {
padding: 12px 14px;
background: color-mix(in srgb, var(--cc-neg) 12%, var(--bg-primary));
border: 1px solid color-mix(in srgb, var(--cc-neg) 30%, var(--border));
border-radius: 8px;
font-size: 13px;
color: var(--text-primary);
line-height: 1.5;
}
.prev-dispo-empty {
padding: 20px;
text-align: center;
color: var(--text-secondary);
font-size: 13px;
}
@media (max-width: 540px) {
.prev-dispo-aloc-grid { grid-template-columns: 1fr; }
}
/* Total row */
.prev-table tfoot .prev-total-row td {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--page-accent-soft) 70%, var(--bg-secondary)),
var(--bg-secondary)) !important;
border-top: 1.5px solid var(--page-accent,#5b6ff0);
border-bottom: none;
padding: 12px 12px;
font-weight: 800;
font-size: 12.5px;
}
.prev-table tfoot .prev-total-label {
color: var(--page-accent,#5b6ff0) !important;
letter-spacing: 0.08em;
font-size: 11px;
text-transform: uppercase;
}
/* Petite icône (?) d'aide à côté des en-têtes */
.prev-help {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--bg-tertiary);
color: var(--text-secondary);
font-size: 9.5px; font-weight: 700;
cursor: help;
margin-left: 5px;
border: 1px solid var(--border);
vertical-align: 1px;
font-family: inherit;
letter-spacing: 0;
text-transform: none;
transition: background .15s, color .15s, border-color .15s, transform .15s;
user-select: none;
}
.prev-help:hover, .prev-help:focus {
background: var(--page-accent,#5b6ff0);
color: #fff;
border-color: transparent;
transform: scale(1.15);
outline: none;
}
/* Mode confidentialité — préserver le blur */
body.privacy .prev-table .prev-num,
body.privacy .prev-kpi-row .metric-value,
body.privacy .prev-kpi-row .metric-sub { filter: blur(5px) !important; }
/* Mobile */
@media (max-width:700px) {
.prev-table { min-width: 720px; font-size: 11.5px; }
.prev-table thead th { font-size: 9.5px; padding: 7px 8px; }
.prev-table tbody td { padding: 8px 8px; }
.prev-tag-past, .prev-tag-now { display: none; }
.prev-fp-max { display: none; }
.prev-refresh-btn { font-size: 11px; padding: 5px 11px; }
}
/* ════════════════════════════════════════════════════════════════════
✦ TOASTS — notifications discrètes en bas à droite
════════════════════════════════════════════════════════════════════ */
.toast-container {
position: fixed;
bottom: 5rem;
right: 1.25rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: 360px;
}
.toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px 11px 14px;
background: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
min-width: 220px;
max-width: 360px;
}
.toast.is-leaving { animation: toast-out 0.25s ease-in both; }
.toast-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
color: #fff;
}
.toast-success .toast-icon { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 10px rgba(16,185,129,0.35); }
.toast-error .toast-icon { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 10px rgba(239,68,68,0.35); }
.toast-info .toast-icon { background: linear-gradient(135deg, #5b6ff0, #8b5cf6); box-shadow: 0 4px 10px rgba(91,111,240,0.35); }
.toast-warning .toast-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 10px rgba(245,158,11,0.35); }
.toast-message { flex: 1; min-width: 0; line-height: 1.35; }
.toast-success { border-left: 3px solid #10b981; }
.toast-error { border-left: 3px solid #ef4444; }
.toast-info { border-left: 3px solid #5b6ff0; }
.toast-warning { border-left: 3px solid #f59e0b; }
@keyframes toast-in {
from { opacity: 0; transform: translateX(20px) scale(0.96); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
@media (max-width: 700px) {
.toast-container { bottom: 5.5rem; right: 1rem; left: 1rem; max-width: none; }
.toast { min-width: 0; }
}
/* ════════════════════════════════════════════════════════════════════
✦ SKELETON LOADERS — états de chargement
════════════════════════════════════════════════════════════════════ */
.skel {
display: inline-block;
background: linear-gradient(90deg,
var(--bg-secondary) 25%,
color-mix(in srgb, var(--bg-secondary) 50%, var(--bg-tertiary)) 50%,
var(--bg-secondary) 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s linear infinite;
border-radius: 4px;
vertical-align: middle;
}
.skel-text { height: 1em; min-width: 60px; }
.skel-num { height: 14px; min-width: 70px; }
.skel-num-lg { height: 18px; min-width: 90px; }
.skel-pill { height: 18px; width: 60px; border-radius: 99px; }
.skel-cell { display: block; height: 14px; width: 80%; margin: 2px 0; }
.skel-bar { display: block; height: 6px; border-radius: 99px; width: 100%; }
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skel-tr td { padding: 11px 14px !important; }
.skel-tr td .skel { display: block; }
/* ════════════════════════════════════════════════════════════════════
✦ FIABILITÉ DES PRONOS IA — refonte
════════════════════════════════════════════════════════════════════ */
/* Empty state */
.fiab-empty {
text-align: center; padding: 3rem 1.5rem;
color: var(--text-secondary);
}
.fiab-empty-icon { font-size: 36px; margin-bottom: 14px; opacity: .8; }
.fiab-empty-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.fiab-empty-sub { font-size: 13px; line-height: 1.5; }
.fiab-empty-sub em { color: var(--page-accent,#8b5cf6); font-style: normal; font-weight: 600; }
.fiab-empty-line {
padding: 14px 0;
font-size: 13px;
color: var(--text-secondary);
font-style: italic;
text-align: center;
}
/* Sémantique pos/neg adaptatives */
.fiab-pos { color: var(--cc-pos); font-weight: 700; }
.fiab-neg { color: var(--cc-neg); font-weight: 700; }
/* Section head : titre + meta */
.fiab-section-head {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.fiab-section-meta {
font-size: 11.5px;
color: var(--text-secondary);
letter-spacing: -0.005em;
}
/* Réglages bankroll */
.fiab-settings {
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap;
padding: 1rem 1.25rem !important;
margin-bottom: 1.25rem;
}
.fiab-setting { display: flex; flex-direction: column; gap: 6px; }
.fiab-setting-label {
font-size: 10.5px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.fiab-setting-input {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 4px 10px 4px 6px;
transition: border-color .15s, box-shadow .15s;
}
.fiab-setting-input:focus-within {
border-color: var(--page-accent,#8b5cf6);
box-shadow: 0 0 0 3px var(--page-accent-soft, rgba(139,92,246,0.18));
}
.fiab-setting-input input {
width: 80px; padding: 5px 8px;
background: transparent; border: none; outline: none;
color: var(--text-primary);
font-size: 14px; font-weight: 700;
font-family: inherit;
text-align: right;
font-variant-numeric: tabular-nums;
}
.fiab-eur { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.fiab-doublon-zone {
display: inline-flex; align-items: center; gap: 8px;
margin-left: auto;
}
.fiab-doublon-badge {
font-size: 11.5px; font-weight: 600;
padding: 4px 10px;
background: var(--warning-soft, rgba(245,158,11,0.14));
color: var(--cc-amber);
border: 1px solid var(--cc-amber);
border-radius: 99px;
}
.fiab-doublon-btn {
padding: 5px 12px;
font-size: 11.5px; font-weight: 600;
background: transparent;
color: var(--cc-amber);
border: 1px solid var(--cc-amber);
border-radius: 99px;
cursor: pointer;
font-family: inherit;
transition: background .12s, color .12s;
}
.fiab-doublon-btn:hover { background: var(--cc-amber); color: #fff; }
/* Chart wrapper — hauteur fixe */
.fiab-chart-wrap {
position: relative;
height: 260px;
width: 100%;
}
@media (max-width: 700px) {
.fiab-chart-wrap { height: 200px; }
}
/* Matrice de calibration */
.fiab-matrice-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fiab-matrice {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.fiab-matrice thead th {
text-align: left;
padding: 10px 12px;
background: var(--bg-secondary);
color: var(--text-secondary);
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--border-md);
}
.fiab-matrice thead th.num { text-align: right; }
.fiab-matrice tbody td {
padding: 11px 12px;
border-bottom: 1px solid var(--border);
color: var(--text-primary);
}
.fiab-matrice tbody tr:hover td { background: var(--cc-row-hover); }
.fiab-matrice tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fiab-pct-cell { display: flex; align-items: center; gap: 10px; }
.fiab-bar-mini {
flex: 1; min-width: 60px; height: 5px;
background: var(--bg-secondary);
border-radius: 99px; overflow: hidden;
display: inline-block;
}
.fiab-bar-mini > span {
display: block; height: 100%;
border-radius: 99px;
transition: width .35s ease;
}
.fiab-calib-pill {
display: inline-block;
padding: 3px 10px;
font-size: 10.5px; font-weight: 700;
border-radius: 99px;
border: 1px solid;
letter-spacing: 0.02em;
}
/* Value Bet / Danger Bet — grille de cards */
.fiab-bet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.fiab-bet-card {
padding: 14px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg-primary);
transition: transform .15s, box-shadow .2s, border-color .2s;
}
.fiab-bet-value {
background: linear-gradient(135deg, var(--cc-rec-bg) 0%, transparent 60%), var(--bg-primary);
border-color: rgba(16,185,129,0.40);
}
.fiab-bet-danger {
background: linear-gradient(135deg, var(--cc-dep-bg) 0%, transparent 60%), var(--bg-primary);
border-color: rgba(239,68,68,0.40);
}
.fiab-bet-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.fiab-bet-head {
display: flex; justify-content: space-between; align-items: center;
gap: 10px; margin-bottom: 8px;
}
.fiab-bet-name {
font-size: 13.5px; font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.fiab-bet-edge {
flex-shrink: 0;
font-size: 13px; font-weight: 800;
padding: 4px 11px; border-radius: 99px;
letter-spacing: -0.01em;
}
.fiab-edge-pos { background: rgba(16,185,129,0.18); color: var(--cc-pos); border: 1px solid rgba(16,185,129,0.45); }
.fiab-edge-neg { background: rgba(239,68,68,0.18); color: var(--cc-neg); border: 1px solid rgba(239,68,68,0.45); }
.fiab-bet-meta {
font-size: 11.5px;
color: var(--text-secondary);
margin-bottom: 10px;
line-height: 1.4;
}
.fiab-bet-stats {
display: flex; gap: 14px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.fiab-bet-stat { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fiab-bet-stat-label {
font-size: 9.5px; font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.06em;
}
.fiab-bet-stat-val {
font-size: 16px; font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.fiab-danger-head {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 700;
color: var(--cc-neg);
margin: 16px 0 10px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.fiab-danger-icon { font-size: 14px; }
/* Recommandations — réutilisation de .alerte avec variante go */
.alerte-go { background: var(--success-soft, rgba(16,185,129,0.13)); border-color: #10b981; color: var(--cc-pos); }
.fiab-rec { margin-bottom: 8px; }
.fiab-rec strong { color: var(--text-primary); font-weight: 700; }
.fiab-kelly-head {
margin-top: 16px; margin-bottom: 8px;
font-size: 11px; font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.07em;
}
.fiab-kelly-list { display: flex; flex-direction: column; gap: 0; }
.fiab-kelly-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.fiab-kelly-row:last-child { border-bottom: none; }
.fiab-kelly-name { flex: 1; font-weight: 600; color: var(--text-primary); }
.fiab-kelly-meta { font-size: 11px; color: var(--text-secondary); }
.fiab-kelly-val {
font-size: 14px; font-weight: 800;
color: var(--cc-pos);
min-width: 60px; text-align: right;
font-variant-numeric: tabular-nums;
}
/* Détail par type (cat blocks + tranches) */
.fiab-cat-block {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.fiab-cat-block:last-child { border-bottom: none; }
.fiab-cat-head {
display: flex; align-items: center; gap: 10px;
font-size: 13px;
}
.fiab-cat-name { flex: 1; font-weight: 700; color: var(--text-primary); letter-spacing: -0.005em; }
.fiab-cat-meta { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fiab-cat-pct { font-size: 14px; font-weight: 800; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.fiab-cat-tot { font-size: 11px; color: var(--text-secondary); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.fiab-cat-gain { font-size: 12.5px; font-weight: 700; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.fiab-tranche-list { padding-top: 8px; padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.fiab-tranche {
display: grid;
grid-template-columns: 76px 1fr 40px 38px 56px;
align-items: center;
gap: 10px;
padding: 4px 0;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.fiab-tranche-label { color: var(--text-secondary); }
.fiab-tranche-bar {
background: var(--bg-secondary);
border-radius: 99px; height: 5px; overflow: hidden;
}
.fiab-tranche-bar > span { display: block; height: 100%; border-radius: 99px; transition: width .3s ease; }
.fiab-tranche-pct { text-align: right; font-weight: 700; }
.fiab-tranche-tot { text-align: right; color: var(--text-secondary); }
.fiab-tranche-gain { text-align: right; font-weight: 600; }
/* Performance par compétition */
.fiab-comp-list { display: flex; flex-direction: column; }
.fiab-comp-row {
display: grid;
grid-template-columns: 1fr 50px 50px 70px;
align-items: center; gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.fiab-comp-row:last-child { border-bottom: none; }
.fiab-comp-name { font-weight: 600; color: var(--text-primary); }
.fiab-comp-tot { color: var(--text-secondary); font-size: 11.5px; text-align: right; }
.fiab-comp-pct { font-weight: 800; text-align: right; }
.fiab-comp-gain { font-weight: 700; text-align: right; }
/* Pronostics list */
.fiab-prono {
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.fiab-prono:last-child { border-bottom: none; }
.fiab-prono-head {
display: flex; justify-content: space-between; align-items: center;
gap: 8px; margin-bottom: 4px;
}
.fiab-prono-match {
font-size: 14px; font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.fiab-vs {
font-weight: 400;
color: var(--text-secondary);
font-size: 12px;
margin: 0 4px;
}
.fiab-prono-del {
padding: 3px 8px;
font-size: 11px; font-weight: 600;
background: transparent;
color: var(--cc-neg);
border: 1px solid rgba(239,68,68,0.30);
border-radius: 6px;
cursor: pointer;
opacity: 0.6;
transition: opacity .12s, background .12s;
font-family: inherit;
}
.fiab-prono-del:hover { opacity: 1; background: rgba(239,68,68,0.10); }
.fiab-prono-meta {
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 10px;
display: flex; gap: 12px; flex-wrap: wrap;
}
.fiab-prono-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* Pari pill */
.fiab-pari {
display: flex; align-items: center; gap: 10px;
padding: 8px 11px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 6px;
transition: background .12s, border-color .12s;
}
.fiab-pari-win {
background: var(--cc-rec-bg);
border-color: rgba(16,185,129,0.40);
}
.fiab-pari-lose {
background: var(--cc-dep-bg);
border-color: rgba(239,68,68,0.40);
}
.fiab-pari-info { flex: 1; min-width: 0; }
.fiab-pari-label {
font-size: 12.5px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.fiab-pari-meta {
font-size: 10.5px;
color: var(--text-secondary);
margin-top: 2px;
}
.fiab-pari-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fiab-pari-gain { font-size: 11.5px; font-weight: 700; }
.fiab-pari-res { font-size: 16px; font-weight: 800; }
.fiab-pari-undo {
padding: 1px 6px; font-size: 11px;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-family: inherit;
transition: color .12s, border-color .12s;
}
.fiab-pari-undo:hover { color: var(--text-primary); border-color: var(--border-md); }
.fiab-pari-vote {
padding: 5px 12px;
font-size: 13px; font-weight: 800;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
transition: transform .12s, background .12s;
}
.fiab-pari-win-btn {
background: rgba(16,185,129,0.12);
color: var(--cc-pos);
border: 1px solid rgba(16,185,129,0.45);
}
.fiab-pari-lose-btn {
background: rgba(239,68,68,0.12);
color: var(--cc-neg);
border: 1px solid rgba(239,68,68,0.45);
}
.fiab-pari-vote:hover { transform: scale(1.05); }
.fiab-pari-win-btn:hover { background: var(--cc-pos); color: #fff; border-color: transparent; }
.fiab-pari-lose-btn:hover { background: var(--cc-neg); color: #fff; border-color: transparent; }
/* ════════════════════════════════════════════════════════════════════
✦ VUE D'ENSEMBLE — Valeur nette + Projection refondues
════════════════════════════════════════════════════════════════════ */
/* Composition bar (liquide / investi / tangible) */
.vn-compo {
margin-bottom: 1rem;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.vn-compo-bar {
display: flex; height: 8px;
border-radius: 99px; overflow: hidden;
background: var(--bg-secondary);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.vn-seg { display: block; height: 100%; transition: width .4s ease; }
.vn-seg-liquide { background: linear-gradient(90deg, #06b6d4, #0891b2); }
.vn-seg-investi { background: linear-gradient(90deg, #10b981, #059669); }
.vn-seg-tangible { background: linear-gradient(90deg, #f59e0b, #d97706); }
.vn-seg-creance { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.vn-compo-legend {
display: flex; gap: 14px; flex-wrap: wrap;
margin-top: 8px;
font-size: 11.5px;
color: var(--text-secondary);
}
.vn-legend { display: inline-flex; align-items: center; gap: 6px; }
.vn-legend strong { color: var(--text-primary); font-weight: 700; }
.vn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vn-dot-liquide { background: #06b6d4; box-shadow: 0 0 6px rgba(6,182,212,0.5); }
.vn-dot-investi { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); }
.vn-dot-tangible { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); }
/* Lignes améliorées */
.vn-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.vn-row:last-of-type { border-bottom: none; }
.vn-row-label {
display: inline-flex; align-items: center; gap: 8px;
color: var(--text-primary);
font-weight: 500;
}
.vn-row-meta {
font-size: 10.5px; font-weight: 500;
padding: 1px 7px; border-radius: 99px;
background: var(--bg-secondary);
color: var(--text-secondary);
}
.vn-row-sub {
padding: 0 0 6px;
border-bottom: 0.5px solid var(--border);
justify-content: flex-start;
gap: 8px;
font-size: 11px;
color: var(--text-secondary);
opacity: 0.75;
}
.vn-row-detail {
padding-left: 26px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
}
.vn-row-epargne .vn-row-label { font-weight: 600; }
.vn-total {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 0 0; margin-top: 6px;
border-top: 1px solid var(--border-md);
font-size: 15px; font-weight: 700;
}
/* ── Projection 12 mois — mini cards en .metric style ── */
.proj-mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 1rem;
}
.proj-mini {
position: relative;
padding: 0.85rem 1rem 0.85rem 1.1rem;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: transform .18s, box-shadow .22s, border-color .22s;
}
.proj-mini::before {
content:''; position: absolute; left: 0; top: 12%; bottom: 12%;
width: 3px; border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, var(--page-accent,#5b6ff0), var(--page-accent-2,#8b5cf6));
opacity: .9;
}
.proj-mini:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
border-color: var(--border-md);
}
.proj-mini-final::before {
background: linear-gradient(180deg, #10b981, #059669);
}
.proj-mini-label {
font-size: 10.5px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-bottom: 6px;
}
.proj-mini-val {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
.proj-mini-grid { grid-template-columns: 1fr; }
}
/* Mini-table par mois */
.proj-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.proj-table {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 12px; font-variant-numeric: tabular-nums;
}
.proj-table thead th {
padding: 7px 8px;
text-align: center;
color: var(--text-secondary);
font-weight: 600; font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border-md);
background: var(--bg-secondary);
}
.proj-table tbody td {
padding: 8px 8px;
text-align: center;
border-bottom: 1px solid var(--border);
font-weight: 600;
}
.proj-note {
font-size: 11px;
color: var(--text-secondary);
margin-top: 10px;
line-height: 1.5;
}
/* ════════════════════════════════════════════════════════════════════
✦ PAGE OBJECTIF D'ÉPARGNE
════════════════════════════════════════════════════════════════════ */
/* Theme accent vert (épargne) */
#page-objectif {
--page-accent: #10b981;
--page-accent-2: #06b6d4;
--page-accent-soft: rgba(16,185,129,0.18);
}
/* Carte de saisie de l'objectif */
.obj-input-card {
background:
radial-gradient(500px 250px at 100% 0%, var(--page-accent-soft), transparent 60%),
var(--bg-primary) !important;
border: 1px solid rgba(16,185,129,0.30) !important;
padding: 1.25rem 1.5rem !important;
}
.obj-input-header {
display: flex; justify-content: space-between; align-items: center;
gap: 18px; flex-wrap: wrap;
}
.obj-input-title {
font-size: 16px; font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
display: inline-flex; align-items: baseline; gap: 8px;
}
.obj-year {
font-size: 12px; font-weight: 600;
padding: 2px 9px; border-radius: 99px;
background: var(--page-accent-soft);
color: var(--page-accent);
letter-spacing: 0.04em;
}
.obj-input-sub {
font-size: 12.5px;
color: var(--text-secondary);
margin-top: 4px;
}
.obj-input-wrap {
display: inline-flex; align-items: center; gap: 8px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 4px 12px 4px 4px;
transition: border-color .15s, box-shadow .15s;
}
.obj-input-wrap:focus-within {
border-color: var(--page-accent);
box-shadow: 0 0 0 3px var(--page-accent-soft);
}
.obj-input-wrap input {
width: 130px; padding: 8px 10px;
background: transparent; border: none; outline: none;
color: var(--text-primary);
font-size: 18px; font-weight: 800;
font-family: inherit;
text-align: right;
font-variant-numeric: tabular-nums;
}
.obj-input-eur {
font-size: 14px; font-weight: 700;
color: var(--text-secondary);
}
/* Empty metric quand aucun objectif */
.obj-empty-metric { text-align: center; }
.obj-empty-metric .metric-value { letter-spacing: -0.005em; }
/* Carte progression */
.obj-progress-card {}
.obj-progress-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 0 4px;
}
.obj-progress-pct {
font-size: 28px; font-weight: 800;
letter-spacing: -0.022em;
font-variant-numeric: tabular-nums;
min-width: 84px;
}
.obj-progress-bar-wrap {
flex: 1;
position: relative;
height: 14px;
background: var(--bg-secondary);
border-radius: 99px;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.obj-progress-bar {
height: 100%;
border-radius: 99px;
transition: width .5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.obj-progress-bar::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
animation: obj-shine 2.5s linear infinite;
}
@keyframes obj-shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.obj-progress-marker {
position: absolute; top: -4px; bottom: -4px;
width: 2.5px;
background: var(--text-primary);
opacity: 0.6;
pointer-events: none;
cursor: help;
border-radius: 2px;
}
.obj-progress-marker::before {
content: '';
position: absolute; top: -3px; left: -2.75px;
width: 8px; height: 8px;
background: var(--text-primary);
border-radius: 50%;
}
.obj-progress-target {
font-size: 14px; font-weight: 700;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
min-width: 70px;
text-align: right;
}
.obj-progress-legend {
display: flex; gap: 18px; flex-wrap: wrap;
align-items: center;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-secondary);
}
.obj-progress-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.obj-track-status { margin-left: auto; font-weight: 700; font-size: 12.5px; }
.obj-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.obj-dot-now { background: var(--page-accent); box-shadow: 0 0 8px var(--page-accent); }
.obj-dot-marker { background: var(--text-primary); opacity: 0.6; }
/* Verdict de faisabilité */
.obj-verdict {
padding: 16px 18px;
border-radius: var(--radius-md);
background: var(--bg-secondary);
border-left: 4px solid;
}
.obj-verdict-head {
display: flex; align-items: flex-start; gap: 14px;
}
.obj-verdict-icon {
width: 38px; height: 38px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 800;
flex-shrink: 0;
}
.obj-verdict-text { flex: 1; min-width: 0; }
.obj-verdict-title {
font-size: 13px; font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 4px;
}
.obj-verdict-msg {
font-size: 13.5px;
color: var(--text-primary);
line-height: 1.5;
}
.obj-verdict-tip {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.55;
}
/* Privacy mode */
body.privacy #page-objectif .metric-value,
body.privacy #page-objectif .metric-sub,
body.privacy #page-objectif .obj-progress-pct,
body.privacy #page-objectif .obj-progress-target,
body.privacy #page-objectif .obj-progress-legend { filter: blur(5px) !important; }
/* Mobile */
@media (max-width: 700px) {
.obj-input-header { gap: 12px; }
.obj-input-wrap input { width: 100px; font-size: 16px; }
.obj-progress-pct { font-size: 22px; min-width: 64px; }
.obj-progress-target { font-size: 12px; min-width: 56px; }
.obj-progress-row { gap: 10px; }
.obj-track-status { margin-left: 0; }
}
/* ════════════════════════════════════════════════════════════════════
✦ SIMULATEUR DCA — Crypto / Bourse
════════════════════════════════════════════════════════════════════ */
.dca-card-btn {
display: block;
width: 100%;
margin-top: 10px;
padding: 7px 10px;
font-size: 11.5px;
font-weight: 600;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
background: var(--bg-primary);
color: var(--text-secondary);
border: 1px solid var(--border-md);
transition: all .15s ease;
}
.dca-card-btn:hover {
background: var(--page-accent-soft, rgba(91,111,240,0.10));
color: var(--page-accent, #5b6ff0);
border-color: var(--page-accent, #5b6ff0);
}
.dca-card-btn-loss {
background: rgba(239,68,68,0.10);
border-color: rgba(239,68,68,0.40);
color: var(--cc-neg, #b91c1c);
}
.dca-card-btn-loss:hover {
background: rgba(239,68,68,0.18);
color: var(--cc-neg, #b91c1c);
border-color: var(--cc-neg, #b91c1c);
}
/* Modal */
#modal-dca .modal { padding: 1.75rem; }
.dca-modal-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 14px; margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.dca-modal-title {
font-size: 17px; font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.dca-modal-sub {
font-size: 12.5px;
color: var(--text-secondary);
margin-top: 4px;
line-height: 1.4;
}
.dca-modal-badge {
flex-shrink: 0;
padding: 6px 12px;
border-radius: 99px;
font-size: 13px; font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.dca-modal-badge.pos { background: var(--cc-rec-bg); color: var(--cc-pos); border: 1px solid rgba(16,185,129,0.45); }
.dca-modal-badge.neg { background: var(--cc-dep-bg); color: var(--cc-neg); border: 1px solid rgba(239,68,68,0.45); }
/* État actuel */
.dca-state-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 1.25rem;
}
.dca-state-tile {
padding: 10px 12px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.dca-state-label {
font-size: 9.5px; font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 4px;
}
.dca-state-val {
font-size: 13.5px; font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
/* Mode toggle */
.dca-mode-toggle {
display: flex; gap: 6px;
margin-bottom: 12px;
background: var(--bg-secondary);
padding: 4px;
border-radius: 99px;
}
.dca-mode-btn {
flex: 1;
padding: 7px 8px;
font-size: 11.5px;
font-weight: 600;
border: none;
border-radius: 99px;
cursor: pointer;
background: transparent;
color: var(--text-secondary);
font-family: inherit;
transition: all .15s ease;
}
.dca-mode-btn:hover { color: var(--text-primary); }
.dca-mode-btn.active {
background: var(--grad-accent, linear-gradient(135deg, #6c7df0, #8b5cf6));
color: #fff;
box-shadow: 0 4px 10px rgba(91,111,240,0.30);
}
/* Input + presets */
.dca-input-row {
display: flex; gap: 10px; align-items: center;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.dca-input-wrap {
flex: 1; min-width: 160px;
display: flex; align-items: center; gap: 6px;
background: var(--bg-primary);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
padding: 4px 12px 4px 4px;
transition: border-color .15s, box-shadow .15s;
}
.dca-input-wrap:focus-within {
border-color: var(--page-accent, #5b6ff0);
box-shadow: 0 0 0 3px var(--page-accent-soft, rgba(91,111,240,0.18));
}
.dca-input-wrap input {
flex: 1; min-width: 0;
padding: 8px 10px;
background: transparent; border: none; outline: none;
color: var(--text-primary);
font-size: 18px; font-weight: 800;
font-family: inherit;
text-align: right;
font-variant-numeric: tabular-nums;
}
.dca-input-unit {
font-size: 14px; font-weight: 700;
color: var(--text-secondary);
}
.dca-presets {
display: flex; gap: 6px;
flex-wrap: wrap;
}
.dca-preset {
padding: 6px 12px;
font-size: 11.5px; font-weight: 600;
border: 1px solid var(--border-md);
border-radius: 99px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font-family: inherit;
transition: all .15s ease;
}
.dca-preset:hover {
background: var(--page-accent-soft, rgba(91,111,240,0.10));
color: var(--page-accent, #5b6ff0);
border-color: var(--page-accent, #5b6ff0);
}
/* Résultat */
.dca-result {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: 14px 16px;
margin-bottom: 1.25rem;
}
.dca-result-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.dca-result-row:last-child { border-bottom: none; }
.dca-result-row > span:first-child {
color: var(--text-secondary);
flex: 1; min-width: 0;
}
.dca-result-val {
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
text-align: right;
}
.dca-result-val strong { font-weight: 800; }
.dca-result-pnl { padding-top: 12px; }
.dca-delta {
display: inline-block;
margin-left: 6px;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
}
.dca-delta.pos { color: var(--cc-pos); }
.dca-delta.neg { color: var(--cc-neg); }
.dca-delta-add {
display: inline-block;
margin-left: 6px;
font-size: 11px;
font-weight: 600;
color: var(--page-accent, #5b6ff0);
padding: 1px 8px;
border-radius: 99px;
background: var(--page-accent-soft, rgba(91,111,240,0.12));
}
/* Barre PRU / cours / nouveau PRU */
.dca-bar-wrap { margin-bottom: 1rem; }
.dca-bar-track {
position: relative;
height: 10px;
background: linear-gradient(90deg, rgba(16,185,129,0.30) 0%, rgba(245,158,11,0.30) 50%, rgba(239,68,68,0.30) 100%);
border-radius: 99px;
margin: 14px 0 10px;
}
.dca-bar-marker {
position: absolute;
top: -5px; width: 4px; height: 20px;
border-radius: 2px;
transform: translateX(-50%);
pointer-events: auto;
cursor: help;
}
.dca-bar-marker::after {
content: '';
position: absolute;
top: -3px; left: 50%; transform: translateX(-50%);
width: 10px; height: 10px;
border-radius: 50%;
background: inherit;
}
.dca-marker-cur { background: #06b6d4; box-shadow: 0 0 8px rgba(6,182,212,0.55); }
.dca-marker-pru { background: var(--cc-neg); box-shadow: 0 0 8px rgba(239,68,68,0.55); }
.dca-marker-new { background: var(--cc-pos); box-shadow: 0 0 8px rgba(16,185,129,0.55); }
.dca-bar-legend {
display: flex; gap: 14px; flex-wrap: wrap;
font-size: 11px;
color: var(--text-secondary);
}
.dca-bar-legend > span {
display: inline-flex; align-items: center; gap: 5px;
}
.dca-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dca-dot-cur { background: #06b6d4; }
.dca-dot-pru { background: var(--cc-neg); }
.dca-dot-new { background: var(--cc-pos); }
/* Warning */
.dca-warning {
background: var(--warning-soft, rgba(245,158,11,0.14));
border: 1px solid #f59e0b;
border-radius: var(--radius-md);
padding: 10px 14px;
font-size: 12.5px;
color: var(--cc-amber);
line-height: 1.5;
margin-bottom: 1rem;
}
/* Mobile */
@media (max-width: 700px) {
.dca-state-grid { grid-template-columns: 1fr 1fr; }
.dca-mode-btn { font-size: 10.5px; padding: 7px 4px; }
.dca-modal-head { flex-direction: column; align-items: flex-start; }
}
/* ════════════════════════════════════════════════════════════════════
✦ DELTA "depuis dernier refresh" — Crypto / Bourse
════════════════════════════════════════════════════════════════════ */
.metric-delta {
font-size: 11px;
font-weight: 600;
letter-spacing: -0.005em;
margin-top: 6px;
font-variant-numeric: tabular-nums;
}
.metric-delta.pos { color: var(--cc-pos, #047857); }
.metric-delta.neg { color: var(--cc-neg, #b91c1c); }
.metric-delta.neu { color: var(--text-secondary); opacity: .7; font-weight: 500; }
.metric-delta-inline {
display: inline-block;
margin-left: 5px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
border-radius: 99px;
font-variant-numeric: tabular-nums;
}
.metric-delta-inline.pos {
color: var(--cc-pos, #047857);
background: rgba(16,185,129,0.12);
}
.metric-delta-inline.neg {
color: var(--cc-neg, #b91c1c);
background: rgba(239,68,68,0.12);
}
.metric-refresh-ts {
font-size: 11px;
color: var(--text-secondary);
opacity: 0.7;
margin-top: 6px;
font-style: italic;
}
/* ════════════════════════════════════════════════════════════════════
✦ ÉDITION MENSUELLE — Prévision 2026
════════════════════════════════════════════════════════════════════ */
/* Bandeau d'aide au-dessus de la table */
.prev-edit-hint {
padding: 12px 16px;
margin: 0 0 1rem;
background: linear-gradient(90deg, var(--page-accent-soft, rgba(91,111,240,0.12)), transparent 70%);
border: 1px solid var(--page-accent-soft, rgba(91,111,240,0.18));
border-left: 3px solid var(--page-accent, #5b6ff0);
border-radius: var(--radius-md);
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.55;
}
.prev-edit-hint strong { color: var(--page-accent, #5b6ff0); font-weight: 700; }
/* Cellules éditables : curseur + hover discret + marker */
.prev-cell-edit { cursor: pointer; transition: background .12s, box-shadow .12s; position: relative; }
.prev-cell-edit:hover {
background: var(--page-accent-soft, rgba(91,111,240,0.10)) !important;
box-shadow: inset 0 0 0 1px var(--page-accent,#5b6ff0);
}
.prev-cell-edit::after {
content: '✎';
position: absolute;
top: 4px; right: 5px;
font-size: 9px;
color: var(--text-secondary);
opacity: 0;
transition: opacity .12s;
}
.prev-cell-edit:hover::after { opacity: 0.55; }
.prev-cell-edited {
background: linear-gradient(135deg, var(--page-accent-soft, rgba(91,111,240,0.10)) 0%, transparent 70%);
}
.prev-cell-edited::after { display: none; }
.prev-edit-mark {
display: inline-block;
margin-left: 4px;
font-size: 10px;
color: var(--page-accent,#5b6ff0);
font-weight: 700;
vertical-align: 1px;
}
/* Modal édition mensuelle */
#modal-prev-edit .modal {
background: var(--bg-primary);
box-shadow: var(--shadow-lg);
}
#modal-prev-edit h3 {
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.prev-edit-sub {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.prev-edit-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
}
.prev-edit-grid-aloc {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.prev-edit-field {
display: flex; flex-direction: column;
gap: 4px;
}
.prev-edit-field label {
font-size: 11px; font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.prev-edit-field small {
font-size: 11px;
color: var(--text-secondary);
opacity: 0.75;
line-height: 1.35;
}
.prev-edit-input-wrap {
display: flex; align-items: center; gap: 6px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 4px 10px 4px 4px;
transition: border-color .15s, box-shadow .15s;
}
.prev-edit-input-wrap:focus-within {
border-color: var(--page-accent,#5b6ff0);
box-shadow: 0 0 0 3px var(--page-accent-soft, rgba(91,111,240,0.18));
}
.prev-edit-input-wrap input {
flex: 1; min-width: 0;
padding: 7px 8px;
background: transparent; border: none; outline: none;
color: var(--text-primary);
font-size: 14px; font-weight: 700;
font-family: inherit;
text-align: right;
font-variant-numeric: tabular-nums;
}
.prev-edit-unit {
font-size: 12px; font-weight: 700;
color: var(--text-secondary);
}
.prev-edit-note {
margin-top: 14px;
padding: 10px 14px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.prev-edit-note strong { color: var(--text-primary); }
/* Mode auto/manuel pour l'allocation */
.prev-edit-mode {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 1rem;
padding: 10px 12px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.prev-edit-mode-row {
display: flex; align-items: flex-start; gap: 10px;
cursor: pointer;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-primary);
}
.prev-edit-mode-row input[type="radio"] {
margin-top: 2px;
accent-color: var(--page-accent,#5b6ff0);
flex-shrink: 0;
}
.prev-edit-mode-row strong { color: var(--page-accent,#5b6ff0); }
.prev-edit-aloc-summary {
margin-top: 14px;
padding: 12px 14px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.prev-aloc-bar {
display: flex; height: 10px;
border-radius: 99px; overflow: hidden;
background: var(--bg-tertiary);
margin-bottom: 8px;
}
.prev-aloc-seg { display: block; height: 100%; transition: width .25s ease; }
.prev-aloc-seg-em { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.prev-aloc-seg-pea { background: linear-gradient(90deg, #10b981, #059669); }
.prev-aloc-seg-cr { background: linear-gradient(90deg, #8b5cf6, #6c7df0); }
.prev-aloc-tot {
font-size: 12.5px;
color: var(--text-primary);
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Mobile */
@media (max-width: 700px) {
#modal-prev-edit .modal { max-width: 100% !important; }
.prev-edit-grid { grid-template-columns: 1fr; }
}
/* Privacy — pages paris */
body.privacy #fiabilite-zone .metric-value,
body.privacy #fiabilite-zone .fiab-pari-gain,
body.privacy #fiabilite-zone .fiab-cat-gain,
body.privacy #fiabilite-zone .fiab-tranche-gain,
body.privacy #fiabilite-zone .fiab-comp-gain,
body.privacy #fiabilite-zone .fiab-kelly-val { filter: blur(5px) !important; }
/* Mobile */
@media (max-width: 700px) {
.fiab-settings { padding: 0.85rem 1rem !important; gap: 12px; }
.fiab-bet-grid { grid-template-columns: 1fr; }
.fiab-tranche {
grid-template-columns: 60px 1fr 36px 36px 50px;
font-size: 10.5px;
}
.fiab-comp-row {
grid-template-columns: 1fr 44px 44px 60px;
font-size: 12px;
}
.fiab-cat-head { flex-wrap: wrap; }
}