/* ═══════════════════════════════════════════════════════════════
   VISION FINANCE — Composants UI + Bootstrap overrides + Coach IA
   Extracted from templates/base.html — VIS-257 (F17 P1a)
   Covers : .vf-card, .vf-kpi, .vf-badge, .vf-table, .vf-colored-box,
            .vf-tx-row, .score-*, .vf-grid, .btn-vf-*, .vf-input,
            .vf-alert, typography utilities, Bootstrap dark compat,
            light-theme overrides, patrimoine tabbar, coach drawer.
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   COMPOSANTS GLOBAUX
   ════════════════════════════════════════════ */

/* Cards */
.vf-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.vf-card-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.vf-card-title { font-size: var(--font-sm); font-weight: 600; color: var(--t1); }
.vf-card-link { font-size: var(--font-xs); color: var(--accent-txt); font-weight: 500; cursor: pointer; text-decoration: none; }
.vf-card-link:hover { text-decoration: underline; color: var(--accent-txt); }
.vf-card-body { padding: 12px 14px; }

/* KPI cards */
.vf-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
}
.vf-kpi-label {
    font-size: var(--font-2xs); font-weight: 600;
    color: var(--t3); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 5px;
}
.vf-kpi-value {
    font-size: var(--font-xl); font-weight: 700;
    color: var(--t1); letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
}
.vf-kpi-sub { font-size: var(--font-xs); font-weight: 500; margin-top: 3px; color: var(--t3); }

/* Colors sémantiques */
.c-up      { color: var(--accent)  !important; }
.c-dn      { color: var(--danger)  !important; }
.c-neu     { color: var(--t2)      !important; }
.c-warn    { color: var(--warning) !important; }
.c-info    { color: var(--info)    !important; }
.c-gold    { color: var(--gold)    !important; }
.c-neutral { color: var(--neutral) !important; }
.c-purple  { color: var(--purple)  !important; }

.bg-up      { background: var(--accent-bg)  !important; }
.bg-dn      { background: var(--danger-bg)  !important; }
.bg-warn    { background: var(--warning-bg) !important; }
.bg-info    { background: var(--info-bg)    !important; }
.bg-gold    { background: var(--gold-bg)    !important; }
.bg-neutral { background: var(--neutral-bg) !important; }

/* Badges */
.vf-badge {
    font-size: var(--font-2xs); font-weight: 700;
    padding: 2px 7px; border-radius: var(--radius-xs);
    display: inline-block; white-space: nowrap;
}
.vf-badge-up      { background: var(--accent-bg);  color: var(--accent-txt); }
.vf-badge-dn      { background: var(--danger-bg);  color: var(--danger-txt); }
.vf-badge-neu     { background: var(--surface2);   color: var(--t2); }
.vf-badge-warn    { background: var(--warning-bg); color: var(--warning-txt); }
.vf-badge-info    { background: var(--info-bg);    color: var(--info-txt); }
.vf-badge-accent  { background: var(--accent);     color: #fff; }
.vf-badge-gold    { background: var(--gold-bg);    color: var(--gold-txt); }
.vf-badge-neutral { background: var(--neutral-bg); color: var(--neutral-txt); }
.vf-badge-purple  { background: var(--purple-bg);  color: var(--purple-txt); }

/* Score badges 0-4 — consolidé depuis ticker_analyzer / etf_analyzer / scpi_analyzer (VIS-57) */
.score-badge {
    font-size: var(--font-2xs); font-weight: 700;
    padding: 2px 7px; border-radius: var(--radius-xs);
    display: inline-block; white-space: nowrap;
}
.score-0 { background: var(--danger-bg);  color: var(--danger-txt);  }
.score-1 { background: var(--warning-bg); color: var(--warning-txt); }
.score-2 { background: var(--warning-bg); color: var(--warning-txt); }
.score-3 { background: var(--accent-bg);  color: var(--accent-txt);  }
.score-4 { background: var(--gold-bg);    color: var(--gold-txt);    }

/* Colored boxes (composant _colored_box.html) */
.vf-colored-box {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--font-sm);
}
.vf-colored-box-header { font-weight: 600; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.vf-colored-box-body { color: inherit; }
.vf-colored-box-info     { background: var(--info-bg);    color: var(--info-txt);    border-color: var(--info); }
.vf-colored-box-success  { background: var(--accent-bg);  color: var(--accent-txt);  border-color: var(--accent); }
.vf-colored-box-warning  { background: var(--warning-bg); color: var(--warning-txt); border-color: var(--warning); }
.vf-colored-box-danger   { background: var(--danger-bg);  color: var(--danger-txt);  border-color: var(--danger); }
.vf-colored-box-accent   { background: var(--accent);     color: #fff; }
.vf-colored-box-neutral  { background: var(--surface2);   color: var(--t2);          border-color: var(--border); }

/* Transaction row (composant _transaction_row.html) */
.vf-tx-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--t1); text-decoration: none;
}
.vf-tx-row:last-child { border-bottom: 0; }
.vf-tx-row-clickable:hover { background: var(--surface-raised); text-decoration: none; }
.vf-tx-icon { font-size: var(--font-md); min-width: 24px; text-align: center; }
.vf-tx-main { flex: 1; min-width: 0; }
.vf-tx-label { font-size: var(--font-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-tx-sublabel { margin-top: 1px; }
.vf-tx-amount { font-size: var(--font-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* KPI display (composant _kpi.html) */
.vf-kpi {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--t1); text-decoration: none;
}
.vf-kpi-clickable { transition: border-color var(--transition-fast); }
.vf-kpi-clickable:hover { border-color: var(--accent); text-decoration: none; }
.vf-kpi-label { letter-spacing: .04em; text-transform: uppercase; }
.vf-kpi-value { font-size: var(--font-xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.vf-kpi-sub { font-variant-numeric: tabular-nums; }

/* Tables */
.vf-table { width: 100%; border-collapse: collapse; }
.vf-table thead tr { background: var(--surface2); }
.vf-table th {
    font-size: var(--font-2xs); font-weight: 600;
    color: var(--t3); text-transform: uppercase;
    letter-spacing: .08em; padding: 7px 12px;
    border-bottom: 1px solid var(--border);
}
.vf-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-sm); color: var(--t1);
    font-variant-numeric: tabular-nums;
}
.vf-table tbody tr { cursor: pointer; transition: background .1s; }
.vf-table tbody tr:hover { background: var(--surface2); }
.vf-table tbody tr:last-child td { border-bottom: none; }

/* Grid system */
.vf-grid        { display: grid; gap: var(--space-4); }
.vf-grid-4      { grid-template-columns: repeat(4, 1fr); }
.vf-grid-3      { grid-template-columns: repeat(3, 1fr); }
.vf-grid-2      { grid-template-columns: repeat(2, 1fr); }
.vf-grid-auto   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.vf-grid-compact { gap: var(--space-3); }

@media (max-width: 1200px) {
    .vf-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .vf-grid-4, .vf-grid-3, .vf-grid-2 { grid-template-columns: 1fr; }
}

/* Buttons */
.btn-vf-accent {
    background: var(--accent); color: #fff;
    border: none; border-radius: var(--radius-sm);
    padding: 6px 14px; font-size: var(--font-sm); font-weight: 600;
    cursor: pointer; transition: opacity .12s;
}
.btn-vf-accent:hover { opacity: .87; }
.btn-vf-ghost {
    background: transparent; color: var(--t2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 14px; font-size: var(--font-sm); font-weight: 500;
    cursor: pointer; transition: background .12s;
}
.btn-vf-ghost:hover { background: var(--surface2); }

/* Forms */
.vf-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: var(--font-sm); color: var(--t1);
    width: 100%; transition: border-color .12s;
    font-family: inherit;
}
.vf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2.5px rgba(0,184,122,.12); }
.vf-label {
    font-size: var(--font-xs); font-weight: 600;
    color: var(--t2); margin-bottom: 4px;
    display: block; text-transform: uppercase;
    letter-spacing: .04em;
}

/* Alerts */
.vf-alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm); font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}
.vf-alert-success { background: var(--accent-bg); color: var(--accent-txt); border: 1px solid rgba(0,184,122,.2); }
.vf-alert-danger  { background: var(--danger-bg); color: var(--danger-txt); border: 1px solid rgba(239,68,68,.2); }
.vf-alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(245,158,11,.2); }
.vf-alert-info    { background: var(--info-bg); color: var(--info); border: 1px solid rgba(59,130,246,.2); }

/* Bootstrap alerts compat */
.alert-success  { background: var(--accent-bg)  !important; color: var(--accent-txt) !important; border-color: rgba(0,184,122,.2)  !important; }
.alert-danger   { background: var(--danger-bg)  !important; color: var(--danger-txt) !important; border-color: rgba(239,68,68,.2)  !important; }
.alert-warning  { background: var(--warning-bg) !important; color: var(--warning)    !important; border-color: rgba(245,158,11,.2) !important; }
.alert-info     { background: var(--info-bg)    !important; color: var(--info)        !important; border-color: rgba(59,130,246,.2)  !important; }
.btn-close      { filter: var(--t1-filter, none); }

/* Typography */
h1,h2,h3,h4,h5,h6 { color: var(--t1); font-weight: 600; line-height: 1.3; }
/* Ne pas écraser le texte blanc sur fond coloré */
.text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6,
h1.text-white,h2.text-white,h3.text-white,h4.text-white,h5.text-white,h6.text-white,
.card-header.text-white h5,.card-header.text-white *,
[style*="background:var(--accent)"] h5,
[style*="background:var(--accent)"] * { color: #fff !important; }
h1 { font-size: var(--font-xl); font-weight: 700; letter-spacing: -.4px; }
h2 { font-size: var(--font-lg); letter-spacing: -.3px; }
h3 { font-size: var(--font-md); }
h4 { font-size: var(--font-md); }
h5 { font-size: var(--font-base); }
h6 { font-size: var(--font-sm); }
p  { color: var(--t2); font-size: var(--font-base); line-height: 1.6; margin-bottom: .75rem; }
a  { color: var(--accent-txt); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: var(--font-xs); color: var(--t2); }
.text-muted { color: var(--t2) !important; }
.border-primary { border-color: var(--accent) !important; }
.text-primary { color: var(--accent) !important; }
.text-primary-neutral { color: var(--t1) !important; }
.text-success { color: var(--accent) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

/* Typography utilities — alignées sur --font-* */
.font-2xs  { font-size: var(--font-2xs);  }
.font-xs   { font-size: var(--font-xs);   }
.font-sm   { font-size: var(--font-sm);   }
.font-base { font-size: var(--font-base); }
.font-md   { font-size: var(--font-md);   }
.font-lg   { font-size: var(--font-lg);   }
.font-xl   { font-size: var(--font-xl);   line-height: 1.2; }
.font-2xl  { font-size: var(--font-2xl);  line-height: 1.15; }
.font-3xl  { font-size: var(--font-3xl);  line-height: 1.1; }

/* Labels forms Bootstrap compat */
label, .form-label {
    color: var(--t2) !important;
    font-size: var(--font-xs) !important;
    font-weight: 600 !important;
    margin-bottom: 4px;
}
.form-control, .form-select {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--t1) !important;
    font-size: var(--font-sm) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2.5px rgba(0,184,122,.12) !important;
    background: var(--surface) !important;
}
.form-control::placeholder { color: var(--t3) !important; }

/* Card Bootstrap compat */
.card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
}
.card-header {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
    color: var(--t1) !important;
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
}
.card-body { padding: 12px 14px !important; }
.card-footer { background: var(--surface2) !important; border-color: var(--border) !important; }

/* Table Bootstrap compat */
.table { color: var(--t1) !important; }
.table > :not(caption) > * > * { background: transparent !important; border-color: var(--border) !important; }
.table-head, thead { background: var(--surface2) !important; }
.table th { font-size: var(--font-2xs) !important; font-weight: 600 !important; color: var(--t3) !important; text-transform: uppercase; letter-spacing: .05em; }
.table td { font-size: var(--font-sm) !important; color: var(--t1) !important; }
.table-hover tbody tr:hover > * { background: var(--surface2) !important; }

/* Buttons Bootstrap compat */
.btn-primary   { background: var(--accent) !important; border-color: var(--accent) !important; font-size: var(--font-sm) !important; font-weight: 600 !important; }
.btn-success   { background: var(--accent) !important; border-color: var(--accent) !important; }
.btn-danger    { background: var(--danger) !important; border-color: var(--danger) !important; }
.btn-secondary { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--t2) !important; }
.btn-outline-primary  { border-color: var(--accent) !important; color: var(--accent-txt) !important; font-size: var(--font-sm) !important; }
.btn-outline-primary:hover  { background: var(--accent-bg) !important; }
.btn-outline-secondary { border-color: var(--border) !important; color: var(--t2) !important; font-size: var(--font-sm) !important; }
.btn-outline-secondary:hover { background: var(--surface2) !important; }
.btn-outline-danger  { border-color: var(--danger) !important; color: var(--danger-txt) !important; font-size: var(--font-sm) !important; }
.btn-sm { padding: 6px 12px !important; font-size: var(--font-xs) !important; line-height: 1.4 !important; }

/* Misc Bootstrap compat */
.badge { font-size: var(--font-2xs) !important; font-weight: 600 !important; }
.badge.bg-success, .badge.bg-primary { background: var(--accent) !important; color: #0c0f14 !important; }
.badge.bg-danger  { background: var(--danger) !important; color: #fff !important; }
.badge.bg-warning { background: var(--warning) !important; color: #0c0f14 !important; }
.badge.bg-secondary { background: var(--surface2) !important; color: var(--t2) !important; }
.nav-link { color: var(--t2) !important; font-size: var(--font-sm) !important; }
.nav-link.active, .nav-link:hover { color: var(--accent-txt) !important; }
.modal-content { background: var(--surface) !important; border-color: var(--border) !important; color: var(--t1) !important; }
.modal-header { border-color: var(--border) !important; padding: 12px 16px !important; }
.modal-footer { border-color: var(--border) !important; padding: 10px 16px !important; }
.modal-title { font-size: var(--font-md) !important; font-weight: 600 !important; color: var(--t1) !important; }
.dropdown-menu { background: var(--surface) !important; border-color: var(--border) !important; }
.dropdown-item { color: var(--t2) !important; font-size: var(--font-sm) !important; }
.dropdown-item:hover { background: var(--surface2) !important; color: var(--t1) !important; }
.pagination .page-link { background: var(--surface) !important; border-color: var(--border) !important; color: var(--t2) !important; font-size: var(--font-sm) !important; }
.pagination .page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; }

/* Bootstrap text/title colors on dark theme — VIS audit 2026-05-22 */
.card, .card-body, .card-header, .card-footer { color: var(--t1); --bs-body-color: var(--t1); --bs-heading-color: var(--t1); }
.card-title { color: var(--t1); }
.breadcrumb-item, .breadcrumb-item.active { color: var(--t2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--t3); }
.text-dark { color: var(--t1) !important; }
.text-muted { color: var(--t3) !important; }
.text-secondary { color: var(--t2) !important; }
.text-body { color: var(--t1) !important; }
.text-body-secondary { color: var(--t2) !important; }
.fs-4, .fs-5, .fs-6 { color: inherit; }
/* Horizon button actif : texte noir sur vert (white-on-green ratio insuffisant) */
.horizon-btn.active { color: #0c0f14 !important; }

/* ── Charts canvas transparent ── */
canvas { background: transparent !important; }
.chart-container, [class*="chart"] { background: transparent !important; }

/* ── Lab1 KPI cards fond neutre ── */
[data-theme="light"] .bg-gradient { background: var(--surface) !important; }
[data-theme="light"] .card.bg-gradient { background: var(--surface) !important; }
/* Icones dans cards colorées */
[data-theme="light"] .card-icon { background: var(--accent-bg) !important; }
/* Border-primary */
.border-primary { border-color: var(--accent) !important; }
/* Spinners */
.spinner-border { color: var(--accent) !important; }
/* Progress bars */
.progress-bar { background: var(--accent) !important; }
/* Form check */
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
/* Input group addon */
.input-group-text { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--t2) !important; }
/* Nav tabs */
.nav-tabs { border-color: var(--border) !important; }
.nav-tabs .nav-link.active { background: var(--surface) !important; border-color: var(--border) !important; color: var(--accent-txt) !important; }
.nav-tabs .nav-link:hover { border-color: var(--border) !important; color: var(--t1) !important; }
/* Select */
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7485' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; }
/* Table striped */
.table-striped tbody tr:nth-of-type(odd) > * { background: var(--surface2) !important; }
/* Badge bg-primary */
.badge.bg-primary { background: var(--accent) !important; }
.badge.bg-info { background: var(--info) !important; }
/* Popover */
.popover { background: var(--surface) !important; border-color: var(--border) !important; }
.popover-body { color: var(--t1) !important; }

/* ── Bootstrap list-group dark ── */
.list-group-item {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--t1) !important;
}
.list-group-item:hover { background: var(--surface2) !important; }
.list-group-item.active { background: var(--accent) !important; border-color: var(--accent) !important; }
.list-group-item-action:hover { background: var(--surface2) !important; color: var(--t1) !important; }

/* ── Bootstrap progress dark ── */
.progress { background: var(--surface2) !important; }

/* ── Bootstrap select / input dark ── */
select option { background: var(--surface) !important; color: var(--t1) !important; }

/* ── Bootstrap hr dark ── */
hr { border-color: var(--border) !important; opacity: 1; }

/* ── Badges outline dark ── */
.badge.bg-outline-primary { border: 1px solid var(--accent); color: var(--accent-txt); background: transparent !important; }

/* Scrollbar global */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Selection */
::selection { background: var(--accent-bg); color: var(--accent-txt); }


/* ════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ════════════════════════════════════════════ */
[data-theme="light"] {
    color-scheme: light;
}
[data-theme="light"] .card-header.bg-gradient,
[data-theme="light"] .card-header[style*="gradient"],
[data-theme="light"] .card-header.text-white {
    color: #fff !important;
}
[data-theme="light"] .form-check-input {
    background-color: var(--surface);
    border-color: var(--border2);
}
[data-theme="light"] .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
[data-theme="light"] select option {
    background: #fff;
    color: #0C0F14;
}
[data-theme="light"] .badge.bg-secondary {
    background: #E2E4E9 !important;
    color: #6B7485 !important;
}
[data-theme="light"] .alert-dismissible .btn-close {
    filter: invert(1) brightness(0.3);
}
/* Texte blanc sur fond coloré — garder en light */
.text-white { color: #fff !important; }
.card-header.text-white * { color: #fff !important; }

/* Animations */
@keyframes vf-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.vf-fadein { animation: vf-fadein .25s ease forwards; }

/* ════════════ HARMONISATION FINALE ════════════ */
/* Tous les éléments interactifs utilisent var(--accent) */
/* Liens dans le contenu principal */
/* Titres de page cohérents */
.page-header h1, .page-header h2 { font-size: var(--font-lg) !important; font-weight: 700 !important; }
/* Container padding */
.container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
/* Tous les gradients → supprimés */
[class*="bg-gradient"] { background-image: none !important; }
/* Tous les box-shadow → standardisés */
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--shadow) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
/* Éléments bleus Bootstrap → vert */
.bg-primary { background: var(--accent) !important; }
.text-primary { color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
/* Overflow hidden sur les cards (empêche le border-radius) */
.card { overflow: visible !important; }
/* Inputs cohérents */
.form-control, .form-select, input[type="text"], input[type="number"],
input[type="date"], input[type="email"], textarea {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--t1) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--font-sm) !important;
    font-family: inherit !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2.5px rgba(0,184,122,.12) !important;
}
/* Containers */
/* pb/pt cohérents */
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
/* Nav pills actifs → vert */
.nav-pills .nav-link.active { background: var(--accent) !important; color: #fff !important; }
/* Mise en page harmonisée sur toutes les pages */
.vf-content > .container-fluid { padding: 0 !important; }

/* ── Patrimoine — onglets unifiés (réorg UX 2026-05) ── */
.vf-patri-tabbar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.vf-patri-tab {
    padding: 9px 14px;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--t2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: var(--transition-fast);
    white-space: nowrap;
}
.vf-patri-tab:hover { color: var(--t1); }
.vf-patri-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.vf-patri-tab i { font-size: var(--font-md); }

/* ── Coach IA flottant (F2 PR3) ─────────────────────────────────────────── */
.vf-coach-fab {
    position: fixed;
    bottom: 22px; right: 22px;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: 0;
    box-shadow: var(--shadow-lg, 0 8px 20px rgba(0,0,0,.4));
    cursor: pointer;
    font-size: var(--font-xl);
    z-index: 1040;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.vf-coach-fab:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}
.vf-coach-fab.open { transform: scale(.9); }
@media (max-width: 768px) {
    /* Décale pour ne pas chevaucher la bottom-nav mobile */
    .vf-coach-fab { bottom: 78px; right: 14px; width: 48px; height: 48px; font-size: var(--font-xl); }
}

.vf-coach-drawer {
    position: fixed;
    top: 0; right: 0; height: 100vh;
    width: 380px; max-width: 95vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 30px rgba(0,0,0,.35);
    z-index: 1050;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.vf-coach-drawer.open { transform: translateX(0); }

.vf-coach-drawer-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.vf-coach-drawer-title { flex: 1; color: var(--t1); font-size: var(--font-sm); font-weight: 600; }
.vf-coach-drawer-action {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--t2);
    padding: 4px 9px;
    border-radius: var(--radius-xs);
    font-size: var(--font-2xs);
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none;
}
.vf-coach-drawer-action:hover { background: var(--surface-raised); color: var(--t1); }

.vf-coach-drawer-thread {
    flex: 1; overflow-y: auto;
    padding: 14px 14px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 0;
}
.vf-coach-drawer-msg {
    display: flex;
    max-width: 100%;
}
.vf-coach-drawer-msg-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: var(--font-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 86%;
}
.vf-coach-drawer-msg.user        { justify-content: flex-end; }
.vf-coach-drawer-msg.user .vf-coach-drawer-msg-bubble {
    background: var(--accent-bg, var(--surface-raised));
    color: var(--accent-txt, var(--t1));
    border-bottom-right-radius: 4px;
}
.vf-coach-drawer-msg.assistant .vf-coach-drawer-msg-bubble {
    background: var(--surface-raised);
    color: var(--t1);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.vf-coach-drawer-msg.assistant.loading .vf-coach-drawer-msg-bubble { color: var(--t3); }
.vf-coach-drawer-msg.assistant.error   .vf-coach-drawer-msg-bubble { color: var(--danger); border-color: var(--danger); }

.vf-coach-drawer-empty {
    color: var(--t2);
    font-size: var(--font-xs);
    line-height: 1.55;
    text-align: center;
    padding: 16px 6px 4px;
}
.vf-coach-drawer-empty strong { color: var(--t1); display: block; font-size: var(--font-sm); margin-bottom: 6px; }
.vf-coach-drawer-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.vf-coach-drawer-suggest {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--t1);
    padding: 8px 11px;
    border-radius: var(--radius-xs);
    font-size: var(--font-2xs);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex; align-items: center; gap: 8px;
}
.vf-coach-drawer-suggest:hover { border-color: var(--accent); }
.vf-coach-drawer-suggest i { color: var(--accent); }

.vf-coach-drawer-composer {
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    display: flex; gap: 6px; align-items: flex-end;
}
.vf-coach-drawer-composer textarea {
    flex: 1;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--t1);
    font-size: var(--font-xs);
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    max-height: 120px;
    min-height: 36px;
}
.vf-coach-drawer-composer textarea:focus { outline: none; border-color: var(--accent); }
.vf-coach-drawer-composer button {
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: var(--radius-xs);
    padding: 0 11px;
    height: 36px;
    cursor: pointer;
}
.vf-coach-drawer-composer button:disabled { opacity: .5; cursor: not-allowed; }

.vf-coach-drawer-disclaimer {
    padding: 6px 12px 9px;
    color: var(--t3);
    font-size: 10.5px;
    line-height: 1.35;
}

.vf-coach-typing-dots {
    display: inline-flex; gap: 3px;
}
.vf-coach-typing-dots span {
    width: 5px; height: 5px;
    background: var(--t3);
    border-radius: 50%;
    animation: vfCoachDot 1.2s infinite ease-in-out;
}
.vf-coach-typing-dots span:nth-child(2) { animation-delay: .15s; }
.vf-coach-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes vfCoachDot {
    0%,60%,100% { transform: translateY(0); opacity: .6; }
    30%         { transform: translateY(-4px); opacity: 1; }
}