/* =============================================================================
   budget.css v4
   - Séparateurs catégorie : hauteur augmentée, texte centré avec fond teinté
   - Non payé : blanc (plus de rouge sur les chiffres)
   - Total/An : payé/total avec payé en vert
   - Reste à payer : uniquement charges non payées restantes
   - Détails variables : ligne par achat, colonnes autres mois vides
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --bg-root:        #080b12;
    --bg-panel:       #0e1320;
    --bg-card:        #131929;
    --bg-row:         #0f1622;
    --bg-row-alt:     #111826;
    --bg-hover:       #1a2235;
    --bg-input:       #0a0f1a;

    --txt-primary:    #e2e8f0;
    --txt-secondary:  #d0dae6;
    --txt-muted:      #97a3b4;
    --txt-mono:       #a8c4e0;

    --border:         #1e2d42;
    --border-light:   #253347;

    --accent:         #3b82f6;
    --accent-glow:    rgba(59,130,246,0.15);
    --accent-hover:   #2563eb;

    --paid:           #22c55e;
    --paid-bg:        rgba(34,197,94,0.08);
    /* Non payé = blanc — plus de rouge sur les chiffres */
    --unpaid:         #8896a8;  /* gris pour le bouton pastille non payé */
    --color-non-paye: #8896a8;  /* gris discret par défaut pour montant non payé */

    /* Mois courant — ambre */
    --mois-bg:        rgba(251,191,36,0.09);
    --mois-bg-header: rgba(251,191,36,0.16);
    --mois-txt:       #fbbf24;
    --mois-border:    rgba(251,191,36,0.25);
    --var-color:      #e2b96f;  /* couleur des totaux variables — ambre doux lisible */

    --col-label:  200px;
    --col-month:  100px;
    --col-total:  130px;
    --row-h:      27px;
    --header-h:   34px;
    --cat-h:      30px;    /* hauteur séparateur catégorie */
    --transition: 0.13s ease;

    /* Polices — centralisées pour pouvoir les changer d'une seule ligne */
    --font-sans:  'Inter', sans-serif;
    --font-mono:  'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; overflow: hidden; }
/* Chevron select custom */
select:not(#sel-annee) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 5px center !important;
    background-size: 16px !important;
}
body { height: 100%; overflow: hidden; }
/* Les modals fixed ne sont pas affectés par overflow:hidden du body */
body {
    font-family: var(--font-sans);
    font-size: 13.5px;
    background: var(--bg-root);
    color: var(--txt-primary);
    line-height: 1.4;
}

/* =============================================================================
   LAYOUT
   ============================================================================= */
#app {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    overflow: hidden;
}

/* =============================================================================
   TOPBAR
   ============================================================================= */
#topbar {
    position: relative;
    display: flex; align-items: stretch;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    user-select: none;
}
#topbar h1 {
    font-size: 14.5px; font-weight: 600;
    color: var(--txt-primary);
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 0 18px; display: flex; align-items: center;
    flex-shrink: 0; border-right: 1px solid var(--border);
}
.nav-tabs { display: flex; align-items: stretch; }
.nav-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 0 18px; font-size: 13.5px; font-weight: 500;
    color: var(--txt-muted); cursor: pointer;
    border: none; border-bottom: 2px solid transparent;
    background: none; font-family: var(--font-sans);
    transition: all var(--transition); white-space: nowrap;
    margin-bottom: -1px;
    position: relative;
}
.nav-tab:hover  { color: var(--txt-secondary); background: var(--bg-hover); }
.nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-glow); }
.tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 700; font-family: var(--font-sans);
    border-radius: 8px; line-height: 1;
    vertical-align: middle; margin-left: 2px;
}
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0 2px;
    margin: 8px 0;          /* espace vertical par rapport aux bords de la topbar */
    background: var(--bg-card);
    height: 28px;           /* hauteur fixe, bien en dessous des 44px de la topbar */
}
/* boutons fléchés à l'intérieur du bloc — sans leur propre bordure */
.topbar-nav .dash-nav-btn {
    border: none;
    background: transparent;
    width: 26px;
    height: 26px;
    border-radius: 4px;
}
.topbar-nav .dash-nav-btn:hover {
    background: var(--bg-hover);
    border: none;
}
/* select année intégré dans la nav */
.topbar-nav #sel-annee {
    margin: 0 1px;
    border: none;
    background: var(--bg-input);   /* fond sombre pour le dropdown natif */
    color: var(--txt-primary);
    padding: 0 4px;
    height: 26px;
    font-size: 13px;
}
.topbar-nav #sel-annee option {
    background: var(--bg-input);
    color: var(--txt-primary);
}
/* séparateurs visuels entre les éléments du bloc */
.topbar-nav .dash-nav-btn:first-child { border-radius: 4px 0 0 4px; }
.topbar-nav .dash-nav-btn:last-child  { border-radius: 0 4px 4px 0; }

.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-right: 16px; }
#sel-annee {
    background: var(--bg-card); border: 1px solid var(--border-light);
    color: var(--txt-primary); padding: 4px 8px; border-radius: 5px;
    font-size: 13.5px; font-family: var(--font-mono); cursor: pointer;
}
.btn-top {
    display: flex; align-items: center; gap: 4px;
    padding: 0 10px; border-radius: 5px; height: 28px;
    border: 1px solid var(--accent); background: rgba(59,130,246,0.25);
    color: #fff; font-size: 11.5px; cursor: pointer;
    font-family: var(--font-sans); font-weight: 600;
    transition: all var(--transition); white-space: nowrap;
    box-sizing: border-box;
}
.btn-top:hover { background: rgba(59,130,246,0.45); color: #fff; }

/* Cellule titre "Revenus — XXXX" dans le header du tableau salaire */
.sal-titre-col {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--txt-secondary) !important;
    border-right: 1px solid var(--border-light) !important;
    align-self: stretch;
    display: flex !important;
    align-items: center;
}


#save-indicator {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--paid);
    font-size: 0;
    color: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 9999;
    border-radius: 0 0 2px 2px;
}
#save-indicator.visible { opacity: 1; }

/* Champ invalide — partagé app + pages auth */
.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
}

/* Pages auth (login, register, forgot, reset) */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-root);
}
.login-box {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 40px 36px;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 768px) {
    .login-box { padding: 28px 22px; border-radius: 12px; }
}
.login-logo { text-align: center; }
.login-logo .login-icon { font-size: 42px; display: block; margin-bottom: 10px; }
.login-logo h1 { color: var(--txt-primary); font-size: 20px; font-weight: 700; margin: 0; }
.login-logo p  { color: var(--txt-muted); font-size: 13px; margin: 6px 0 0; }
.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.login-field label { font-size: 12px; color: var(--txt-muted); font-weight: 500; }
.login-field input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.13s, box-shadow 0.13s;
}
/* Autofill navigateur — garder le thème sombre */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--txt-primary) !important;
    border-color: var(--border-light) !important;
    caret-color: var(--txt-primary);
}
.login-field input:focus:-webkit-autofill {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1000px var(--bg-input) inset, 0 0 0 3px rgba(59,130,246,0.15) !important;
}
.login-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.login-field .hint { font-size: 11px; color: var(--txt-muted); }
/* Indicateur force mot de passe */
.pass-force { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-height: 20px; }
.pass-force .crit { padding: 2px 7px; border-radius: 10px; font-size: 11px; }
.crit.ok  { background: rgba(16,185,129,0.15); color: #10b981; }
.crit.nok { background: rgba(239,68,68,0.12);  color: #64748b; }
.login-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.13s;
}
.login-btn:hover  { opacity: 0.9; }
.login-btn:active { opacity: 0.8; }
.login-error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 13px;
}
.login-success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    color: #22c55e;
    padding: 14px;
    border-radius: 7px;
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
}
.login-links { text-align: center; font-size: 13px; color: var(--txt-muted); }
.login-links a { color: var(--accent); text-decoration: none; }

/* Toast erreur */
#error-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1e1a2e;
    border: 1px solid rgba(239,68,68,0.5);
    border-left: 4px solid #ef4444;
    color: #fca5a5;
    font-size: 13px;
    font-family: var(--font-sans);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 9999;
    max-width: 360px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
#error-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   VUES
   ============================================================================= */
.vue { display: none; flex-direction: column; }
.vue.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
#vue-stats.active { overflow-y: auto; }

/* Vue fixes : le tableau-container prend tout l'espace */
#vue-fixes { flex-direction: column; position: relative; }
#vue-fixes #tableau-container { flex: 1; min-height: 0; }

/* Vue variables : le wrapper prend tout l'espace */
#vue-variables { flex-direction: column; }
#vue-variables { flex-direction: column; }
#vue-variables .tableau-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Scroll confiné au tableau lui-même → le selection-bar et le footer
   restent visibles en permanence (au-dessus / en-dessous du scroll) */
#vue-variables #tableau-variables {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#vue-variables #tableau-variables-footer {
    flex-shrink: 0;
}
.tableau-wrapper { flex: 1; }

/* =============================================================================
   EN-TÊTE MOIS
   ============================================================================= */
.tab-header {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    align-items: center; height: var(--header-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0; z-index: 10;
}
.tab-header .col-label {
    padding: 0 8px; font-weight: 600; font-size: 12.5px;
    color: var(--txt-secondary); letter-spacing: 0.06em; text-transform: uppercase;
}
.tab-header .col-mois {
    text-align: center; font-size: 11.5px; font-weight: 500;
    color: var(--txt-secondary); letter-spacing: 0.04em; text-transform: uppercase;
    height: 100%; display: flex; align-items: center; justify-content: center;
    gap: 3px;
    transition: background var(--transition), color var(--transition);
}
.tab-header .col-mois.actif {
    color: var(--mois-txt); font-weight: 700;
    background: var(--mois-bg-header);
    border-left: 1px solid var(--mois-border);
    border-right: 1px solid var(--mois-border);
}
.tab-header .col-mois.mois-nav {
    color: var(--accent); font-weight: 700;
    background: rgba(59,130,246,0.10);
    border-left: 1px solid rgba(59,130,246,0.30);
    border-right: 1px solid rgba(59,130,246,0.30);
}
/* Mois avec note : indicateur visible dans l'en-tête */
.tab-header .col-mois.has-note-header {
    color: var(--mois-txt);
    font-weight: 600;
}
.tab-header .col-mois.has-note-header::after {
    content: '📝';
    font-size: 10.5px;
    line-height: 1;
    opacity: 0.8;
}
.tab-header .col-total {
    text-align: right; padding-right: 10px;
    font-size: 11.5px; font-weight: 600; color: var(--txt-secondary);
    letter-spacing: 0.04em; text-transform: uppercase;
    background: rgba(59,130,246,0.06);
    border-left: 2px solid rgba(59,130,246,0.25);
}

/* =============================================================================
   SÉPARATEUR CATÉGORIE — centré, hauteur augmentée, fond teinté
   ============================================================================= */
.cat-separator {
    display: flex; align-items: center; justify-content: center;
    height: var(--cat-h);
    border-top: 2px solid var(--border-light);
    border-bottom: 1px solid var(--border);
    position: relative;
    margin-top: 2px;  /* petit écart après la ligne précédente */
}
.cat-separator .cat-nom {
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    z-index: 1; text-align: center;
}
/* Lignes décoratives de chaque côté */
.cat-separator::before,
.cat-separator::after {
    content: ''; flex: 1; height: 1px;
    background: currentColor; opacity: 0.22; margin: 0 20px;
}

/* =============================================================================
   LIGNE DE CHARGE FIXE
   ============================================================================= */
.charge-row {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    height: var(--row-h); align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg-row);      /* fond opaque — évite transparence au scroll */
    transition: background var(--transition);
}
.charge-row:hover { background: var(--bg-hover); }
.charge-row:nth-child(even) { background: var(--bg-row-alt); }
.charge-row:nth-child(even):hover { background: var(--bg-hover); }

.charge-nom { padding: 0 6px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.nom-texte { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; flex: 1; }
.row-actions { opacity: 0; display: flex; gap: 2px; flex-shrink: 0; transition: opacity var(--transition); }
.charge-row:hover .row-actions { opacity: 1; }
.btn-row { width: 15px; height: 15px; border: none; background: none; color: var(--txt-muted); cursor: pointer; font-size: 12.5px; display: flex; align-items: center; justify-content: center; border-radius: 3px; transition: all var(--transition); }
.btn-row:hover        { color: var(--txt-primary); background: var(--border-light); }
.btn-row.danger:hover { color: #ef4444; }

/* =============================================================================
   CELLULE MONTANT — v4 : non payé = blanc, payé = vert
   ============================================================================= */
.cell-montant {
    height: 100%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-family: var(--font-mono); font-size: 12.5px;
    position: relative; z-index: 0;  /* sous les colonnes sticky */
    transition: background var(--transition);
}
.cell-montant.mois-actif {
    background: var(--mois-bg) !important;
    border-left: 1px solid var(--mois-border);
    border-right: 1px solid var(--mois-border);
}
.cell-montant.mois-nav {
    background: rgba(59,130,246,0.07) !important;
    border-left: 1px solid rgba(59,130,246,0.25);
    border-right: 1px solid rgba(59,130,246,0.25);
}
/* Payé = vert */
.cell-montant.paye     { color: var(--paid); }
/* Non payé = blanc (texte normal) */
.cell-montant.non-paye { color: var(--color-non-paye); }
/* Zéro = discret */
.cell-montant.zero     { color: var(--txt-muted); }

.cell-montant:not(.zero):hover { filter: brightness(1.15); }

.cell-input {
    position: absolute; inset: 0;
    background: var(--bg-input); border: 1px solid var(--accent);
    color: var(--txt-primary); font-family: var(--font-mono);
    font-size: 12.5px; text-align: center; outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow); z-index: 5; padding: 0;
}

/* Bouton paiement — rond au survol de la ligne */
.btn-paiement {
    position: absolute; top: 3px; right: 3px;
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.5px solid currentColor; cursor: pointer;
    opacity: 0; transition: opacity var(--transition), transform var(--transition);
    z-index: 3; background: transparent; padding: 0; font-size: 0; line-height: 0;
}
.cell-montant.paye     .btn-paiement { color: var(--paid); }
.cell-montant.non-paye .btn-paiement { color: var(--unpaid); }  /* gris pour non-payé */
.charge-row:hover      .btn-paiement { opacity: 0.7; }
.btn-paiement:hover { opacity: 1 !important; transform: scale(1.4); }
.cell-montant.paye     .btn-paiement:hover { background: var(--paid); }
.cell-montant.non-paye .btn-paiement:hover { background: #8896a8; }

/* =============================================================================
   TOTAL ANNUEL — format "payé / total"
   Payé en vert, slash + total en gris
   ============================================================================= */
.cell-total {
    text-align: right; padding-right: 8px;
    font-family: var(--font-mono); font-size: 11.5px;
    display: flex; align-items: center; justify-content: flex-end; gap: 2px;
    background: rgba(59,130,246,0.06);
    border-left: 2px solid rgba(59,130,246,0.20);
}
/* Tableau salaire uniquement : total + moyenne empilés */
.sal-grid-row .cell-total,
.sal-mob-wrap .cell-total {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
}
.total-paye  { color: var(--paid); font-size: 11.5px; }
.total-slash { color: var(--txt-muted); font-size: 10.5px; margin: 0 1px; }
.total-annuel-val { color: var(--txt-secondary); font-size: 11.5px; }
/* Si rien de payé, on affiche juste le total sans slash */
.cell-total.tout-paye .total-slash,
.cell-total.tout-paye .total-annuel-val { display: none; }
.cell-total.rien-paye .total-paye,
.cell-total.rien-paye .total-slash { display: none; }

/* =============================================================================
   LIGNES DE TOTAL CATÉGORIE
   ============================================================================= */
.total-row {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    height: 30px; align-items: center;
    background: var(--bg-card);
    border-top: 2px solid var(--border-light);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);  /* ombre sous le total pour séparer */
}
.total-row .total-label {
    padding: 0 10px 0 4px; font-size: 11.5px; font-weight: 700;
    color: var(--txt-secondary); letter-spacing: 0.06em; text-transform: uppercase;
    text-align: right;
}
.total-row .total-cell {
    text-align: center; font-family: var(--font-mono);
    font-size: 12.5px; font-weight: 600; color: var(--txt-primary);
}
.total-row .total-cell.mois-actif {
    background: var(--mois-bg) !important; color: var(--mois-txt);
    border-left: 1px solid var(--mois-border); border-right: 1px solid var(--mois-border);
}
.total-row .total-cell.mois-nav {
    background: rgba(59,130,246,0.07) !important;
    border-left: 1px solid rgba(59,130,246,0.25); border-right: 1px solid rgba(59,130,246,0.25);
}
/* Total/An dans les lignes de total : même format payé/total */
.total-row .cell-total { font-size: 11.5px; }

/* =============================================================================
   SALAIRE
   ============================================================================= */
.salaire-row {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    height: 30px; align-items: center;
    background: var(--bg-panel); border-bottom: 1px solid var(--border-light);
}
.salaire-row .sal-label { padding: 0 8px; font-size: 12.5px; font-weight: 600; color: var(--txt-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sal-cell {
    text-align: center; font-family: var(--font-mono); font-size: 12.5px;
    font-weight: 500; cursor: pointer; height: 100%;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
}
.sal-cell:hover      { background: var(--bg-hover); }
.sal-cell.has-value  { color: var(--paid); }
.sal-cell.zero       { color: var(--txt-muted); }
.sal-cell.mois-actif { background: var(--mois-bg) !important; border-left: 1px solid var(--mois-border); border-right: 1px solid var(--mois-border); }
.sal-cell.mois-nav   { background: rgba(59,130,246,0.07) !important; border-left: 1px solid rgba(59,130,246,0.25); border-right: 1px solid rgba(59,130,246,0.25); }

/* Colonne total (dernière) des lignes salaire et reste à payer — bordure bleue dégradé */
.salaire-row .sal-cell:last-child {
    background: rgba(59,130,246,0.06);
    border-left: 2px solid rgba(59,130,246,0.20);
}
.reste-row .reste-cell:last-child {
    background: rgba(59,130,246,0.06);
    border-left: 2px solid rgba(59,130,246,0.20);
}

/* =============================================================================
   RESTE À PAYER — uniquement les charges non payées du mois
   ============================================================================= */
.reste-row {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    height: 28px; align-items: center;
    border-top: 2px solid rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.04);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.35);
    position: relative; z-index: 1;
}
.reste-row .reste-label {
    padding: 0 10px 0 4px; font-size: 11.5px; font-weight: 700;
    color: #ef4444; letter-spacing: 0.06em; text-transform: uppercase;
    text-align: right;
}

/* Ligne de total global charges — séparée visuellement du total catégorie */
.total-row.grand-total {
    margin-top: 14px;
    border-top: 2px solid rgba(226,184,111,0.5);
    box-shadow: -999px 0 0 0 rgba(226,184,111,0.05), 999px 0 0 0 rgba(226,184,111,0.05),
                0 -14px 0 0 rgba(0,0,0,0.45);   /* comble le gap avec une ombre sombre */
    background: rgba(226,184,111,0.05);
    position: relative; z-index: 2;
}
/* Hachures dans le gap via pseudo-élément */
.total-row.grand-total::before {
    content: '';
    position: absolute;
    top: -14px; left: 0; right: 0; height: 14px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255,255,255,0.12) 4px,
        rgba(255,255,255,0.12) 6px
    );
    pointer-events: none;
}
.total-row.grand-total .total-label { color: #e2b96f !important; }
.total-row.grand-total .total-cell  { color: #e2b96f !important; }


/* Ligne reste à payer — accentuée + ombre */

.reste-cell {
    text-align: center; font-family: var(--font-mono);
    font-size: 12.5px; font-weight: 600;
}
/* Reste à payer = toujours blanc/rouge si > 0, discret si 0 */
.reste-cell.a-payer  { color: #ef4444; }  /* il reste qqch à payer */
.reste-cell.rien     { color: var(--txt-muted); }  /* tout est payé */
.reste-cell.mois-actif { background: var(--mois-bg) !important; border-left: 1px solid var(--mois-border); border-right: 1px solid var(--mois-border); }
.reste-cell.mois-nav   { background: rgba(59,130,246,0.07) !important; border-left: 1px solid rgba(59,130,246,0.25); border-right: 1px solid rgba(59,130,246,0.25); }

/* =============================================================================
   CHARGES VARIABLES — onglet séparé
   ============================================================================= */
.var-row {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    height: var(--row-h); align-items: center;
    border-bottom: 1px solid var(--border); cursor: pointer;
    transition: background var(--transition);
}
.var-row:hover { background: var(--bg-hover); }

/* En-tête de groupe : un titre qui porte déjà les totaux consolidés et se
   replie, à l'image des catégories de charges fixes. Les membres se lisent
   en dessous, légèrement décalés. */
.var-row-groupe {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-left: 2px solid currentColor;
    font-weight: 700;
}
.var-row-groupe:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.var-row-groupe .var-cell,
.var-row-groupe .cell-total { font-weight: 700; }
.var-groupe-chevron { font-size: 10px; opacity: .7; flex-shrink: 0; }
.var-groupe-compte  { font-size: 10px; opacity: .55; font-weight: 400; margin-left: 4px; white-space: nowrap; }

/* Écarts de la comparaison annuelle. Sur un budget, une dépense qui monte est
   une mauvaise nouvelle : le rouge marque la hausse, le vert la baisse — soit
   l'inverse d'une convention boursière. */
.cmp-table .rouge, span.rouge { color: var(--rouge, #ef4444); }
.cmp-table .vert,  span.vert  { color: var(--vert,  #22c55e); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp-table thead tr { color: var(--txt-muted); font-size: 11px; text-align: left; border-bottom: 1px solid var(--border); }
.cmp-table td, .cmp-table th { padding: 4px 8px; }
.cmp-table tbody tr:hover { background: var(--bg-hover); }

/* Membre d'un groupe : rattaché visuellement à l'en-tête qui le précède,
   par un décalage et un liseré plus discret que celui du groupe. */
.var-row-membre { border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.var-row-membre .var-nom { padding-left: 14px; }

.var-nom { padding: 0 6px; font-size: 12.5px; display: flex; align-items: center; gap: 5px; min-width: 0; }
/* La hauteur de ligne est fixe : un nom trop long passait à la ligne et
   débordait sur la ligne suivante. Il est tronqué plutôt que replié.
   min-width:0 est indispensable — sans lui un enfant flex refuse de rétrécir
   en dessous de la largeur de son contenu. */
.var-nom-texte {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.var-expand-icon { font-size: 10.5px; color: var(--txt-muted); transition: transform var(--transition); flex-shrink: 0; }
.var-row.expanded .var-expand-icon { transform: rotate(90deg); }
.var-cell { text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--txt-muted); }
.var-cell.has-value  { color: var(--txt-mono); }
.var-cell.mois-actif { background: var(--mois-bg) !important; border-left: 1px solid var(--mois-border); border-right: 1px solid var(--mois-border); }
.var-cell.mois-nav   { background: rgba(59,130,246,0.07) !important; border-left: 1px solid rgba(59,130,246,0.25); border-right: 1px solid rgba(59,130,246,0.25); }

.var-details         { display: none; background: rgba(0,0,0,0.18); }
.var-details.visible { display: block; }

/* Ligne de détail : 1 achat, montant sur son mois uniquement, reste vide */
.detail-row {
    /* MÊME grille que les autres lignes — indispensable pour l'alignement */
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    height: 34px; align-items: stretch; /* stretch pour que les cellules flex prennent la hauteur */
    border-bottom: 1px solid rgba(30,45,66,0.4);
}
.detail-label-cell {
    padding: 0 8px 0 20px;
    display: flex; align-items: center;
    overflow: hidden;
}
.detail-nom {
    font-size: 11.5px; color: var(--txt-muted); font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Toutes les cellules mois des détails */
.detail-cell {
    text-align: center;
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--txt-muted);
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px; padding: 1px 2px;
}
/* Cellule avec un achat : visible */
.detail-cell.has-value { color: var(--txt-secondary); }
/* Montant de l achat */
.det-montant {
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--txt-secondary); font-weight: 500;
    line-height: 1.2;
}
/* Description de l achat — très compacte */
.det-label {
    font-size: 9.5px; color: var(--txt-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; line-height: 1.1;
}
/* Mois courant dans les détails */
.detail-cell.mois-actif {
    background: var(--mois-bg) !important;
    border-left: 1px solid var(--mois-border);
    border-right: 1px solid var(--mois-border);
}
.detail-cell.mois-nav {
    background: rgba(59,130,246,0.07) !important;
    border-left: 1px solid rgba(59,130,246,0.25);
    border-right: 1px solid rgba(59,130,246,0.25);
}

/* ─── MULTI-SÉLECTION DES ACHATS ────────────────────────────────────────── */
.detail-cell.selected {
    background: rgba(59,130,246,0.22) !important;
    box-shadow: inset 0 0 0 2px var(--accent);
    position: relative;
}
.detail-cell.selected::after {
    content: '✓';
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 9px;
    color: var(--accent);
    font-weight: 700;
}
/* En mode sélection active, signaler les cellules pleines comme cibles potentielles */
body.selection-mode .detail-cell.has-value:not(.selected):hover {
    background: rgba(59,130,246,0.10) !important;
    cursor: pointer;
}
body.selection-mode .detail-cell:not(.has-value) {
    cursor: not-allowed;
    opacity: 0.5;
}

#selection-bar {
    position: relative;
    z-index: 50;
    flex-shrink: 0;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(59,130,246,0.10));
    border: 1px solid rgba(59,130,246,0.5);
    border-radius: 8px;
    margin: 0 0 8px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--txt-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
#selection-bar.visible { display: flex; }
#selection-bar .sel-count {
    font-weight: 600;
    color: var(--accent);
    margin-right: auto;
}
#selection-bar button {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
#selection-bar button:hover { background: var(--accent); border-color: var(--accent); }
#selection-bar button.danger { color: #fca5a5; }
#selection-bar button.danger:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* =============================================================================
   NOTES
   ============================================================================= */
#zone-notes {
    padding: 4px 10px; background: var(--bg-panel);
    border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--txt-muted); font-style: italic; flex-shrink: 0;
}

/* =============================================================================
   VUE STATS PLEIN ÉCRAN
   ============================================================================= */
#vue-stats { overflow-y: auto; padding: 20px 24px; gap: 16px; background: var(--bg-root); flex-direction: column; }
.stats-kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; flex-shrink: 0; }
.stat-kpi-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
}
.stat-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 8px 8px 0 0;
}
.stat-kpi-card-label { font-size: 10px; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-kpi-card-value { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--txt-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-kpi-card-value.positif { color: var(--paid); }
.stat-kpi-card-value.negatif { color: #ef4444; }
.stat-kpi-card-sub { font-size: 10px; color: var(--txt-muted); }
.stats-charts-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; min-height: 320px; flex-shrink: 0; }
/* 2ème ligne de graphiques */
.stats-charts-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; flex-shrink: 0; }
.stats-charts-row3 { display: grid; grid-template-columns: 1fr; gap: 16px; min-height: 180px; flex-shrink: 0; }

/* Tableau récap annuel */
.recap-table { width:100%; border-collapse:collapse; font-size:11px; }
.recap-table th { padding:6px 10px; text-align:right; font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--txt-muted); border-bottom:1px solid var(--border-light); }
.recap-table th:first-child { text-align:left; }
.recap-table td { padding:5px 10px; text-align:right; font-family:var(--font-mono); font-size:11px; color:var(--txt-secondary); border-bottom:1px solid var(--border); }
.recap-table td:first-child { text-align:left; font-family:var(--font-sans); font-weight:500; color:var(--txt-primary); }
.recap-table tr:hover td { background:var(--bg-hover); }
.recap-table tr.annee-active td { color:var(--txt-primary); background:rgba(59,130,246,0.08); border-top:1px solid rgba(59,130,246,0.3); border-bottom:1px solid rgba(59,130,246,0.3); }
.recap-table tr.annee-active td:first-child::after { content:' ◀'; font-size:9px; color:var(--accent); opacity:0.8; }
.recap-table .val-pos { color:var(--paid); }
.recap-table .val-neg { color:#ef4444; }
.chart-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.chart-card-title { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-muted); flex-shrink: 0; }
.chart-card-body { flex: 1; position: relative; min-height: 200px; max-height: 320px; }
.stats-charts-row2 .chart-card-body { min-height: 220px; max-height: 280px; overflow: hidden; }

/* =============================================================================
   OVERLAY PARAMÈTRES
   ============================================================================= */
#overlay-params { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
#overlay-params.visible { display: flex; }
#panel-params { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 10px; width: 520px; max-height: 80vh; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.params-title { font-size: 15.5px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.params-section { display: flex; flex-direction: column; gap: 10px; }
.params-section-title { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-muted); }
.param-row { display: flex; align-items: center; gap: 10px; }
.param-label { flex: 1; font-size: 13.5px; color: var(--txt-secondary); }
.param-color { width: 36px; height: 28px; border: 1px solid var(--border-light); border-radius: 5px; cursor: pointer; padding: 2px; background: var(--bg-input); }
.cat-list { display: flex; flex-direction: column; gap: 6px; }
.cat-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-card); border-radius: 6px; border: 1px solid var(--border); }
.cat-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cat-ordre-btns { display: flex; flex-direction: column; gap: 1px; }
.btn-cat-ordre { font-size: 9px; color: var(--txt-muted); cursor: pointer; background: none; border: none; padding: 1px 4px; line-height: 1; border-radius: 3px; transition: color var(--transition), background var(--transition); }
.btn-cat-ordre:hover:not(:disabled) { color: var(--txt-primary); background: var(--bg-hover); }
.btn-cat-ordre:disabled { opacity: 0.25; cursor: default; }
.cat-item-nom { flex: 1; font-size: 13.5px; }
.btn-cat-edit { font-size: 11.5px; color: var(--accent); cursor: pointer; background: none; border: none; padding: 2px 6px; }
.btn-cat-del  { font-size: 11.5px; color: #ef4444;       cursor: pointer; background: none; border: none; padding: 2px 6px; }
.btn-primary  { padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { padding: 8px 16px; background: var(--bg-card); color: var(--txt-secondary); border: 1px solid var(--border-light); border-radius: 6px; font-size: 13.5px; cursor: pointer; }

/* MODAL */
#modal-charge { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; align-items: center; justify-content: center; }
#modal-charge.visible { display: flex; }

/* Bouton fermeture × des modales */
.modal-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--txt-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.modal-close-btn:hover {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}
.modal-box {
    position: relative; /* pour positionner la croix en absolu */
}

.modal-box { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 10px; padding: 28px; width: 480px; display: flex; flex-direction: column; gap: 22px; }
.modal-title { font-size: 16.5px; font-weight: 600; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); }
.modal-field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.modal-field label { font-size: 13px; color: var(--txt-secondary); }
.modal-field input, .modal-field select { background: var(--bg-input); border: 1px solid var(--border-light); color: var(--txt-primary); padding: 10px 14px; border-radius: 8px; font-size: 14px; font-family: var(--font-sans); width: 100%; box-sizing: border-box; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-light); }

/* Grille de choix Fixe / Variable */
.modal-type-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin: 8px 0;
}
.modal-type-btn {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 28px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px; cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-sans);
}
.modal-type-btn:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
}
.modal-type-icon { font-size: 32px; line-height: 1; }
.modal-type-label { font-size: 15.5px; font-weight: 600; color: var(--txt-primary); }
.modal-type-desc { font-size: 12px; color: var(--txt-muted); text-align: center; line-height: 1.5; }

/* Pastilles de couleur pour les variables */
.couleur-dot {
    width: 20px; height: 20px; border-radius: 50%;
    cursor: pointer; display: inline-block;
    border: 2px solid transparent;
    transition: transform var(--transition), border-color var(--transition);
}
.couleur-dot:hover { transform: scale(1.2); }
.couleur-dot.selected { border-color: var(--txt-primary); transform: scale(1.15); }

/* =============================================================================
   NOTE RAPIDE — point indicateur + modal
   ============================================================================= */

/* Plus de point sur les cellules salaire — note visible sur l'en-tête mois */

/* Modal note */
#modal-note, #modal-propager, #modal-achat, #modal-edit-var, #modal-deplacer-selection, #modal-cat, #modal-import {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.65); z-index: 300;
    align-items: center; justify-content: center;
}
#modal-note.visible, #modal-propager.visible,
#modal-achat.visible, #modal-edit-var.visible, #modal-deplacer-selection.visible,
#modal-cat.visible, #modal-import.visible { display: flex; }

/* Table de preview import */
.import-table { width:100%; border-collapse:collapse; font-size:11.5px; }
.import-table th { padding:5px 8px; text-align:left; font-size:10px; font-weight:600;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--txt-muted);
    border-bottom:1px solid var(--border-light); }
.import-table td { padding:5px 8px; border-bottom:1px solid var(--border);
    font-family:var(--font-mono); color:var(--txt-secondary); }
.import-table td:last-child { text-align:right; color:var(--txt-primary); font-weight:600; }
.import-table tr:hover td { background:var(--bg-hover); }
.import-table input[type=checkbox] { cursor:pointer; }

/* Color picker catégorie */
.cat-color-picker { display: flex; flex-direction: column; gap: 10px; }
.cat-color-presets {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-color-swatch,
.edit-couleur-dot {
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    border: 2px solid transparent; transition: transform 0.1s, border-color 0.1s;
    flex-shrink: 0; display: inline-block;
}
.cat-color-swatch:hover,
.edit-couleur-dot:hover { transform: scale(1.15); }
.cat-color-swatch.selected,
.edit-couleur-dot.selected { border-color: #fff; transform: scale(1.15); }
.cat-color-custom {
    display: flex; align-items: center; gap: 10px;
}
.cat-color-custom input[type=color] {
    width: 40px; height: 32px; border: 1px solid var(--border-light);
    border-radius: 6px; padding: 2px; background: var(--bg-card);
    cursor: pointer;
}
.cat-color-hex {
    font-family: var(--font-mono); font-size: 13.5px;
    color: var(--txt-secondary); letter-spacing: 0.05em;
}
.note-box {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 10px; padding: 20px; width: 420px;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.note-box textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--txt-primary); padding: 10px;
    border-radius: 6px; font-size: 13.5px;
    font-family: var(--font-sans);
    resize: vertical; min-height: 80px;
    outline: none; line-height: 1.5;
}
.note-box textarea:focus { border-color: var(--accent); }

/* Masquer le bouton supprimer si pas de note existante */
#modal-note.no-note #btn-suppr-note { display: none; }

/* Curseur pointer sur les noms de mois dans l'entête */
.tab-header .col-mois { cursor: pointer; }
.tab-header .col-mois:hover { background: var(--bg-hover); }
.tab-header .col-mois.actif:hover { background: var(--mois-bg-header); }

/* =============================================================================
   BOUTON AJOUTER UN ACHAT — ligne dépliée des variables
   ============================================================================= */
.detail-add-row {
    border-bottom: none;
    border-top: 1px dashed rgba(59,130,246,0.15);
}
.btn-add-achat {
    display: inline-flex; align-items: center; gap: 5px;
    background: none;
    border: 1px dashed rgba(59,130,246,0.35);
    border-radius: 4px;
    color: var(--accent);
    font-size: 11.5px; font-weight: 500;
    font-family: var(--font-sans);
    padding: 3px 10px;
    cursor: pointer;
    opacity: 0.7;
    transition: all var(--transition);
    letter-spacing: 0.03em;
}
.btn-add-achat:hover {
    opacity: 1;
    background: var(--accent-glow);
    border-color: var(--accent);
}
/* plus de ::before — le + est dans le texte du bouton HTML */

/* Nom variable avec actions au survol */
.var-nom { position: relative; overflow: visible; }
.var-nom .row-actions { opacity: 0; transition: opacity var(--transition); }

/* =============================================================================
   TRANSITION DOUCE AU RECHARGEMENT
   ============================================================================= */

/* Classe appliquée avant le rechargement → fondu sortant */
#tableau-container.fading-out {
    opacity: 0;
    transition: opacity 0.18s ease;
}
/* Classe appliquée après rechargement → fondu entrant */
#tableau-container.fading-in {
    opacity: 0;
    animation: fadeIn 0.22s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   LOADER */
#loader {
    display: flex; align-items: center; justify-content: center;
    height: 100%; flex-direction: column; gap: 12px;
    color: var(--txt-muted); font-size: 13.5px;
    /* Positionnement par-dessus le tableau sans le cacher */
    position: absolute; inset: 0; z-index: 5;
    background: rgba(8,11,18,0.6);
    pointer-events: none;
}
#tableau-container {
    transition: opacity 0.15s ease;
}
.spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-root); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

@media (max-width: 1280px) { :root { --col-month: 90px; --col-label: 190px; --col-total: 160px; } }
@media (max-width: 1060px) { :root { --col-month: 68px; --col-label: 170px; --col-total: 130px; } }

/* =============================================================================
   DASHBOARD ACCUEIL
   ============================================================================= */
.dashboard-wrap {
    padding: 24px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dash-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.dash-mois {
    font-size: 28px;
    font-weight: 700;
    color: var(--txt-primary);
    letter-spacing: -0.02em;
}
.dash-annee {
    font-size: 16px;
    color: var(--txt-muted);
    font-weight: 400;
}

/* KPIs */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.dash-kpi {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
}
.dash-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.dash-kpi-salaire::before  { background: var(--paid); }
.dash-kpi-fixes::before    { background: #3b82f6; }
.dash-kpi-variables::before{ background: #8b5cf6; }
.dash-kpi-reste::before    { background: #e2b96f; }
.dash-kpi-apayer::before   { background: #ef4444; }

.dash-kpi-icon  { font-size: 18px; line-height: 1; }
.dash-kpi-val   { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--txt-primary); }
.dash-kpi-val.positif { color: var(--paid); }
.dash-kpi-val.negatif { color: #ef4444; }
.dash-kpi-val.warning { color: #f59e0b; }
.dash-kpi-label { font-size: 11px; color: var(--txt-muted); font-weight: 500; letter-spacing: 0.03em; }

/* Barre progression */
.dash-budget-section {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
}
.dash-budget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.dash-budget-label { font-size: 12px; color: var(--txt-secondary); font-weight: 500; }
.dash-budget-pct   { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--txt-primary); }
.dash-progress-track {
    height: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
}
.dash-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    background: var(--paid);
}
.dash-progress-bar.warning { background: #f59e0b; }
.dash-progress-bar.danger  { background: #ef4444; }

/* Colonnes */
.dash-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    flex: 1;
}
.dash-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;   /* hauteur max sur la carte entière */
    overflow: hidden;    /* le scroll se fait dans .dash-list uniquement */
}
.dash-card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--txt-muted);
    flex-shrink: 0;      /* le titre ne bouge pas */
}
.dash-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;    /* seul le contenu de la liste scrolle */
    min-height: 0;
}
.dash-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 12px;
}
.dash-list-item-nom  { color: var(--txt-secondary); }
.dash-list-item-mont { font-family: var(--font-mono); font-weight: 600; color: var(--txt-primary); }
.dash-list-item-mont.rouge { color: #ef4444; }
.btn-dash-payer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid rgba(34,197,94,0.4); background: rgba(34,197,94,0.08);
    color: var(--paid); font-size: 11px; cursor: pointer;
    transition: all var(--transition); flex-shrink: 0;
}
.btn-dash-payer:hover { background: rgba(34,197,94,0.2); border-color: var(--paid); }
.dash-empty { font-size: 12px; color: var(--txt-muted); font-style: italic; padding: 8px 0; }

/* =============================================================================
   VUE PATRIMOINE — Crédits & Épargnes
   ============================================================================= */

#vue-patrimoine {
    overflow-y: auto;
    padding: 20px 24px;
    gap: 24px;
    background: var(--bg-root);
    flex-direction: column;
}

.patrim-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1400px;
    width: 100%;
    align-items: start;
}

.patrim-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.patrim-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.patrim-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--txt-secondary);
}

.patrim-section-icon { font-size: 16px; }

.patrim-kpis {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.patrim-kpi {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 18px;
    min-width: 160px;
    flex: 1;
    position: relative;
    overflow: hidden;
}
.patrim-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 8px 8px 0 0;
}
.patrim-kpi:has(.patrim-kpi-red)::before   { background: #ef4444; }
.patrim-kpi:has(.patrim-kpi-green)::before  { background: var(--paid); }

.patrim-kpi-val {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--txt-primary);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patrim-kpi-val.patrim-kpi-green { color: var(--paid); }
.patrim-kpi-val.patrim-kpi-red   { color: #ef4444; }

.patrim-kpi-label {
    font-size: 11px;
    color: var(--txt-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patrim-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(660px, 1fr));
    gap: 14px;
}

/* Carte crédit */
.credit-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color var(--transition);
}
.credit-card:hover { border-color: var(--border-light); }
.credit-card.solde { opacity: 0.55; border-style: dashed; }

.credit-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.credit-card-nom {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt-primary);
    line-height: 1.3;
}

.credit-card-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}
.credit-card-tag.actif { background: rgba(59,130,246,0.12); color: var(--accent); }
.credit-card-tag.solde { background: rgba(34,197,94,0.12);  color: var(--paid); }

.credit-progress-wrap { display: flex; flex-direction: column; gap: 5px; }

.credit-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--txt-muted);
}
.credit-progress-labels strong {
    color: var(--txt-secondary);
    font-family: var(--font-mono);
    font-weight: 500;
}

.credit-progress-track {
    height: 5px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
}
.credit-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.credit-infos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.credit-info-row { display: flex; flex-direction: column; gap: 1px; }

.credit-info-label {
    font-size: 10px;
    color: var(--txt-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.credit-info-val {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--txt-primary);
}
.credit-info-val.accent { color: var(--accent); }

.credit-card-actions {
    display: flex;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.credit-action-btn {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 5px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--txt-muted);
    cursor: pointer;
    transition: all var(--transition);
}
.credit-action-btn:hover { color: var(--txt-primary); background: var(--bg-hover); }
.credit-action-btn.danger:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* Carte épargne */
.epargne-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color var(--transition);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}
.epargne-card:hover { border-color: var(--border-light); }

.epargne-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.epargne-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.epargne-card-nom {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt-primary);
    flex: 1;
}

.epargne-card-type {
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--txt-muted);
    text-transform: uppercase;
}

.epargne-solde-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.epargne-solde-val {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--paid);
    letter-spacing: -0.02em;
}

.epargne-solde-label {
    font-size: 11px;
    color: var(--txt-muted);
}

.epargne-objectif-wrap { display: flex; flex-direction: column; gap: 5px; }

.epargne-objectif-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--txt-muted);
}
.epargne-objectif-labels strong {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--paid);
}

.epargne-progress-track {
    height: 4px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
}
.epargne-progress-bar {
    height: 100%;
    background: var(--paid);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.epargne-card-actions {
    display: flex;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* Récap modal crédit */
.credit-recap-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.credit-recap-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--txt-muted);
}
.credit-recap-row strong {
    color: var(--txt-primary);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* Overlays modals patrimoine */
#modal-credit, #modal-epargne, #modal-mouvement, #modal-capital {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
#modal-credit.visible,
#modal-epargne.visible,
#modal-mouvement.visible,
#modal-capital.visible { display: flex; }

/* Boutons type mouvement (versement / retrait) */
.mouvement-type-btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--txt-muted);
    font-size: 12.5px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition);
}
.mouvement-type-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Select type épargne — cohérent avec le reste */
#epargne-type {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    font-family: var(--font-sans);
}

.patrim-empty {
    font-size: 12.5px;
    color: var(--txt-muted);
    font-style: italic;
    padding: 16px 0;
}

/* =============================================================================
   ÉPARGNE — Détail dépliant (historique + graphique)
   ============================================================================= */

.epargne-expand-icon {
    font-size: 10px;
    color: var(--txt-muted);
    transition: transform var(--transition);
    margin-left: auto;
    flex-shrink: 0;
}

.epargne-detail {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}

.epargne-detail-loading {
    font-size: 12px;
    color: var(--txt-muted);
    font-style: italic;
    padding: 8px 0;
}

.epargne-detail-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* En-tête détail : totaux + sélecteur année */
.epargne-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.epargne-detail-totaux {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.epargne-total-badge {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 5px;
    color: var(--txt-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.epargne-total-badge strong { font-family: var(--font-mono); font-weight: 600; }
.epargne-total-badge.versement strong { color: var(--paid); }
.epargne-total-badge.retrait  strong { color: #ef4444; }
.epargne-total-badge.net.pos  strong { color: var(--paid); }
.epargne-total-badge.net.neg  strong { color: #ef4444; }

.epargne-annee-sel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
}

/* Graphique */
.epargne-chart-wrap {
    height: 130px;
    position: relative;
}

/* Liste des mouvements */
.epargne-mouvements-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
}

.epargne-mouvements-header {
    display: grid;
    grid-template-columns: 90px 1fr 100px 100px 56px;
    gap: 6px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--txt-muted);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-panel);
    z-index: 1;
}

.epargne-mouvement-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px 100px 56px;
    gap: 6px;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 5px;
    transition: background var(--transition);
}
.epargne-mouvement-row:hover { background: var(--bg-hover); }

.mv-mois   { color: var(--txt-muted); font-size: 11.5px; }
.mv-detail { color: var(--txt-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-montant {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}
.mv-montant.pos { color: var(--paid); }
.mv-montant.neg { color: #ef4444; }
.mv-solde {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--txt-secondary);
    text-align: right;
}

/* Modal edit crédit */
#modal-edit-credit {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
#modal-edit-credit.visible { display: flex; }

/* Boutons actions sur lignes de mouvements */


.mv-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity var(--transition);
}
.epargne-mouvement-row:hover .mv-actions { opacity: 1; }
.mv-btn {
    background: none;
    border: none;
    color: var(--txt-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all var(--transition);
}
.mv-btn:hover        { color: var(--txt-primary); background: var(--bg-hover); }
.mv-btn.danger:hover { color: #ef4444; }

/* =============================================================================
   NAVIGATION MOIS — Dashboard
   ============================================================================= */


.dash-nav-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--txt-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
}
.dash-nav-btn:hover {
    color: var(--txt-primary);
    background: var(--bg-hover);
    border-color: var(--accent);
}

.dash-nav-today {
    background: none;
    border: 1px solid var(--border-light);
    color: var(--accent);
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--transition);
    flex-shrink: 0;
}
.dash-nav-today:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
}

/* Navigation mois groupée */


/* =============================================================================
   VUE SALAIRE
   ============================================================================= */

#vue-salaire {
    overflow-y: auto;
    padding: 0;
    gap: 0;
    background: var(--bg-root);
    flex-direction: column;
    --col-label: 160px;
    --col-month: 80px;
    --col-total: 130px;
}

.salaire-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.salaire-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.salaire-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 0;
}

.salaire-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--txt-secondary);
}

/* Tableau net/brut */
.salaire-tableau-wrap { overflow-x: auto; width: 100%; }

/* Tableau autres recettes */
.recettes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.recettes-table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--txt-muted);
    border-bottom: 1px solid var(--border-light);
}
.recettes-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--txt-primary);
}
.recettes-table tr:last-child td { border-bottom: none; }
.recettes-table tr:hover td { background: var(--bg-hover); }

/* Desktop : tableau salaire tient dans la largeur disponible */
.salaire-tableau-wrap .tab-header,
.salaire-tableau-wrap .sal-grid-row {
    /* col-total réduit si besoin — la grille s'adapte */
}

/* Tableau salaire — même grille que les charges fixes */
.sal-grid-row {
    display: grid;
    grid-template-columns: var(--col-label) repeat(12, var(--col-month)) var(--col-total);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);    /* bordure haute visible même sans contenu */
    transition: background var(--transition);
    align-items: center;
    min-height: 48px;
}
.sal-grid-row:hover { background: var(--bg-hover); }
.sal-grid-row .col-label {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--txt-secondary);
    background: var(--bg-panel);     /* fond distinct pour la colonne label */
    border-right: 1px solid var(--border-light);
}

.sal-grid-cell {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--txt-secondary);
    text-align: center;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.sal-grid-cell.mois-actif {
    background: var(--mois-bg) !important;
    border-left: 1px solid var(--mois-border);
    border-right: 1px solid var(--mois-border);
}
.sal-grid-cell.mois-nav {
    background: rgba(59,130,246,0.07) !important;
    border-left: 1px solid rgba(59,130,246,0.25);
    border-right: 1px solid rgba(59,130,246,0.25);
}

.salaire-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
.salaire-table th {
    padding: 8px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--txt-muted);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}
.salaire-table td { padding: 7px 14px; border-bottom: 1px solid var(--border); }
.salaire-table tr:hover td { background: var(--bg-hover); }


/* sal-table legacy removed */

.sal-edit-cell {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background var(--transition);
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
}
.sal-edit-cell:hover { background: var(--bg-hover); }

.sal-total-row td {
    background: var(--bg-card) !important;
    border-top: 2px solid var(--border-light);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--txt-primary);
}
.sal-moy { font-size: 11px; color: var(--txt-muted); font-weight: 400; }
.sal-moy-line {
    display: block;
    font-size: 10px;
    color: var(--txt-muted);
    font-weight: 400;
    line-height: 1.3;
}

/* Ligne rappel salaire dans charges fixes */
.salaire-row.rappel {
    opacity: 1;
    pointer-events: none;
    background: var(--bg-panel);  /* fond opaque — évite l'illusion de décalage */
}
.rappel-label {
    font-size: 11.5px !important;
    color: var(--txt-muted) !important;
}
.sal-cell-rappel {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--txt-muted);
}
.sal-cell-rappel.has-value { color: var(--paid); opacity: 0.7; }
.sal-cell-rappel.mois-actif {
    background: var(--mois-bg) !important;
    border-left: 1px solid var(--mois-border);
    border-right: 1px solid var(--mois-border);
}
.sal-cell-rappel.mois-nav {
    background: rgba(59,130,246,0.07) !important;
    border-left: 1px solid rgba(59,130,246,0.25);
    border-right: 1px solid rgba(59,130,246,0.25);
}

/* Journal événements */
.evenements-liste {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
}

/* Timeline horizontale */
.timeline-h {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 40px 16px 16px;
    position: relative;
    min-width: max-content;
}
.timeline-h-line {
    position: absolute;
    top: 51px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--border-light);
    border-radius: 1px;
}
.timeline-h-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    max-width: 150px;
    cursor: pointer;
    position: relative;
    padding: 0 8px;
}
.timeline-h-dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform var(--transition);
}
.timeline-h-item:hover .timeline-h-dot { transform: scale(1.3); }
.timeline-h-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 7px 9px;
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
    width: 100%;
}
.timeline-h-item:hover .timeline-h-card {
    background: var(--bg-hover);
    border-color: var(--border-light);
}
.timeline-h-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    padding: 2px 6px;
    border-radius: 3px;
}
.timeline-h-date {
    font-size: 11px;
    color: var(--txt-muted);
    font-family: var(--font-mono);
}
.timeline-h-detail {
    font-size: 11px;
    color: var(--txt-secondary);
    font-style: italic;
    line-height: 1.3;
}

/* Bouton à deux labels : version courte cachée par défaut */
.btn-label-short { display: none; }

@media (max-width: 768px) {
    /* Bouton "+ Événement" trop large sur mobile → bascule sur "+ Évt" */
    .btn-label-full  { display: none; }
    .btn-label-short { display: inline; }

    /* Header du journal : empêcher le débordement à droite */
    .journal-header { padding-left: 12px !important; padding-right: 12px !important; gap: 6px; }
    .journal-header .salaire-section-title { font-size: 11px; }

    /* Timeline → verticale, dernier événement en haut */
    .timeline-h {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 14px;
        padding: 16px 12px;
        min-width: 0;
    }
    .timeline-h-line {
        top: 16px;
        bottom: 16px;
        left: 22px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .timeline-h-item {
        flex-direction: row;
        max-width: none;
        min-width: 0;
        align-items: flex-start;
        gap: 12px;
        padding: 0;
    }
    .timeline-h-dot {
        margin-top: 8px;
        margin-left: 4px;
    }
    .timeline-h-card {
        flex: 1;
        align-items: flex-start;
        text-align: left;
    }
}

/* Modal événement */
#modal-evenement {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
#modal-evenement.visible { display: flex; }
#evenement-type {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    font-family: var(--font-sans);
    width: 100%;
}

/* Épingle événement dans le tableau salaire */
.sal-epingle {
    font-size: 13px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transition), transform var(--transition);
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}
.sal-epingle:hover { opacity: 1; transform: scale(1.2); }

/* Ligne avec événement — légère teinte */
.sal-has-event td:first-child {
    border-left: 2px solid currentColor;
}

/* KPI taux d'endettement */
.dash-kpi-endettement::before { background: #f59e0b; }

#mois-indicator { min-width: 110px; text-align: center; display: inline-block; }

/* Journal événements — header titre + bouton */
.journal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
    flex-wrap: nowrap;
    max-width: 50%;        /* desktop : limité à la moitié comme avant */
}
.journal-header .salaire-section-title {
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =============================================================================
   TABLEAU SALAIRE — layout split (label fixe + zone scrollable)
   ============================================================================= */
/* ── Mobile salaire : grille unique avec label sticky ────────────────────── */
.sal-mob-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Variable largeur label sticky */
    --sal-label-w: 110px;
}
/* La cellule label du tab-header dans sal-mob-wrap */
.sal-mob-wrap .tab-header > div:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-card);
    border-right: 1px solid var(--border-light);
    /* Ombre de même couleur que le fond pour bloquer les pixels mitoyens des
       cellules colorées (mois actif) qui transparaissaient sur le bord droit */
    box-shadow: 2px 0 0 var(--bg-card);
}
/* Idem pour les cellules label sticky des autres rows mobiles */
.sal-mob-wrap .sal-mob-row > div:first-child[style*="sticky"] {
    box-shadow: 2px 0 0 var(--bg-panel);
}
/* Toutes les lignes de la grille mobile partagent la même structure */
.sal-mob-row {
    display: grid;
    /* grid-template-columns défini en inline style par le JS */
    min-height: 48px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    /* Largeur minimale = label + 12 mois + total */
    min-width: calc(var(--sal-label-w) + 12 * var(--col-month) + var(--col-total));
}
.sal-mob-row:nth-child(even) { background: var(--bg-row-alt); }
.sal-mob-row:hover { background: var(--bg-hover); }
/* Cellule sticky label — fond solide pour masquer le scroll derrière */
.sal-mob-wrap .col-sticky-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-light);
}
/* =============================================================================
   RESPONSIVE MOBILE — breakpoint 768px
   ============================================================================= */

/* ---- Bouton hamburger ---------------------------------------------------- */
.btn-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition);
}
.btn-hamburger span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--txt-secondary);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
    transform-origin: center;
}
.btn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.btn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.btn-hamburger:hover { background: var(--bg-hover); border-color: var(--accent); }

/* ---- Menu mobile déroulant ----------------------------------------------- */
.menu-mobile {
    display: none;
    position: fixed;
    top: 44px;
    left: 0; right: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-light);
    z-index: 90;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
}
.menu-mobile.open {
    display: flex;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.menu-mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.menu-mobile-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--txt-secondary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition), color var(--transition);
}
.menu-mobile-tab:hover  { background: var(--bg-hover); color: var(--txt-primary); }
.menu-mobile-tab.active { color: var(--accent); background: var(--accent-glow); }
.menu-mobile-actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    flex-wrap: wrap;
}
.menu-mobile-actions .btn-top {
    flex: 1;
    justify-content: center;
    min-width: 80px;
}


/* Modal params — actions footer : wrap sur mobile pour que déconnexion ait de la place */

#panel-params > div:last-of-type a.btn-secondary {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    #panel-params > div:last-of-type {
        justify-content: stretch;
    }
    #panel-params > div:last-of-type a.btn-secondary,
    #panel-params > div:last-of-type button {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}
@media (max-width: 768px) {

    /* ---- Topbar ----------------------------------------------------------- */
    #topbar {
        height: auto;
        min-height: 44px;
        flex-wrap: nowrap;
        padding: 0 10px 0 0;
        gap: 6px;
    }
    #topbar h1 {
        padding: 0 12px;
        font-size: 13px;
        flex-shrink: 0;
    }

    /* Masquer la nav desktop et les boutons d'action desktop */
    #nav-desktop     { display: none !important; }
    .btn-top-desktop { display: none !important; }

    /* Afficher le hamburger */
    .btn-hamburger { display: flex; }

    /* Réduire la zone droite */
    .topbar-right {
        gap: 5px;
        padding-right: 0;
        flex-wrap: nowrap;
    }
    .topbar-nav { gap: 2px; }
    #mois-indicator {
        min-width: 80px;
        font-size: 12.5px;
    }
    .dash-nav-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    #sel-annee {
        font-size: 12.5px;
        padding: 3px 6px;
        max-width: 70px;
    }
    #save-indicator {
        height: 3px;
    }

    /* ---- Layout général -------------------------------------------------- */
    html, body { overflow-x: hidden; overflow-y: auto; height: auto; max-width: 100vw; }
    #app { display: block; height: auto; overflow: visible; overflow-x: hidden; padding-top: var(--topbar-h, 100px); max-width: 100vw; }
    .vue.active { overflow: visible; height: auto; min-height: unset; display: block; }

    /* Topbar fixe — le JS met à jour --topbar-h sur :root */
    #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; gap: 0; }
    .menu-mobile { top: auto; position: fixed; width: 100%; }

    /* ---- Dashboard -------------------------------------------------------- */
    .dashboard-wrap { padding: 12px; gap: 12px; overflow: visible; height: auto; }
    .dash-header { gap: 8px; }
    .dash-mois   { font-size: 20px; }
    .dash-annee  { font-size: 13px; }

    /* KPIs : 2 colonnes */
    .dash-kpis {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .dash-kpi        { padding: 12px 10px; border-radius: 8px; }
    .dash-kpi-icon   { font-size: 15px; }
    .dash-kpi-val    { font-size: 16px; }
    .dash-kpi-label  { font-size: 10px; }

    /* Barre de budget */
    .dash-budget-section { padding: 10px 14px; }
    .dash-budget-label   { font-size: 11.5px; }

    /* Colonnes du bas : empilées */
    .dash-cols         { grid-template-columns: 1fr; gap: 10px; }
    .dash-card         { max-height: none; overflow: visible; }
    .dash-list         { overflow-y: visible; max-height: none; }

    /* ---- Tableaux charges fixes & variables : scroll horizontal ----------- */
    #vue-fixes .tableau-wrapper,
    #vue-variables .tableau-wrapper {
        background: transparent;
    }
    #tableau-container { min-width: unset; }

    /* Colonne label élargie sur mobile */
    :root { --col-label: 140px; }

    /* Sticky colonne label — fonctionne uniquement si les éléments scrollables
       sont les wrappers directs, pas des ancêtres intermédiaires */
    .tab-header .col-label  { position: sticky; left: 0; background: var(--bg-card);   z-index: 6; }
    .charge-row .charge-nom { position: sticky; left: 0; background: var(--bg-row);    z-index: 4; }
    .charge-row:nth-child(even) .charge-nom { background: var(--bg-row-alt); }
    .charge-row:hover .charge-nom           { background: var(--bg-hover); }
    .total-row  .total-label  { position: sticky; left: 0; background: var(--bg-card);   z-index: 4; }
    .salaire-row .sal-label   { position: sticky; left: 0; background: var(--bg-panel);  z-index: 4; }
    .reste-row  .reste-label  { position: sticky; left: 0; background: var(--bg-panel);  z-index: 4; }
    .var-row    .var-nom      { position: sticky; left: 0; background: var(--bg-row);    z-index: 4; }
    .var-row:hover .var-nom   { background: var(--bg-hover); }
    .detail-label-cell        { position: sticky; left: 0; background: rgba(0,0,0,0.18); z-index: 3; }
    /* En-tête sticky verticalement */
    .tab-header { position: sticky; top: 0; z-index: 8; }
    .tab-header .col-label  { z-index: 9; }

    /* Isolation du stacking context — permet au sticky de traverser */
    #tableau-fixes,
    #tableau-fixes,
    #tableau-variables {
        isolation: isolate;
        background: var(--bg-row);
    }
    /* ---- Vue Patrimoine --------------------------------------------------- */
    #vue-patrimoine   { padding: 12px; gap: 16px; }
    .patrim-wrap      { grid-template-columns: 1fr; gap: 20px; }
    .patrim-cards-grid { grid-template-columns: 1fr; }
    
    .epargne-card canvas,
    .epargne-card table,
    .epargne-card > * {
        max-width: 100%;
        overflow-x: auto;
    }

    /* KPIs patrimoine — style cartes comme le dashboard */
    .patrim-kpis {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        flex-direction: unset;
    }
    .patrim-kpi {
        min-width: unset;
        padding: 14px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-top: 3px solid var(--accent);  /* bandeau de couleur */
    }
    .patrim-kpi-val {
        font-size: 16px;   /* réduit pour tenir sur une ligne */
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .patrim-kpi:has(.patrim-kpi-red)   { border-top-color: #ef4444; }
    .patrim-kpi:has(.patrim-kpi-green) { border-top-color: var(--paid); }
    .patrim-kpi-label {
        font-size: 10px;
    }

    /* ---- Vue Statistiques ------------------------------------------------- */
    #vue-stats { padding: 0 12px 12px 12px; gap: 12px; overflow-y: visible; overflow-x: hidden; }
    /* Stats KPIs — 2 colonnes, bandeau couleur, valeur sur une ligne */
    .stats-kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }
    .stat-kpi-card {
        padding: 10px 12px;
        border-top: 3px solid var(--accent);
        border-radius: 8px;
    }
    .stat-kpi-card-label {
        font-size: 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stat-kpi-card-value {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stat-kpi-card-value.positif { border-top-color: var(--paid); }
    .stat-kpi-card-sub { font-size: 9px; }

    /* Graphiques — tous en colonne, override les styles inline */
    .stats-charts-row,
    .stats-charts-row2,
    .stats-charts-row3 {
        grid-template-columns: 1fr !important;
        min-height: unset;
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }
    /* Tous les chart-card prennent toute la largeur */
    .stats-charts-row > *,
    .stats-charts-row2 > *,
    .stats-charts-row3 > * {
        grid-column: 1 !important;
        width: 100%;
        margin: 0 !important;
    }
    /* Espace uniforme entre les chart-card */
    .chart-card {
        margin-bottom: 0;
    }
    .chart-card-body { min-height: 180px; }

    /* ---- Vue Salaire ------------------------------------------------------ */
    #vue-salaire { padding: 0; gap: 12px; }
    .evenements-liste    { max-width: 100%; }
    /* Tableau salaire — le scroll est géré par sal-mob-wrap */
    .salaire-tableau-wrap {
        overflow: visible;
    }
    /* Colonnes réduites sur mobile */
    :root { --col-label: 120px; --col-month: 75px; }
    #vue-salaire { --col-month: 95px; --col-total: 130px; }

    /* journal-header pleine largeur sur mobile */
    .journal-header { max-width: 100%; }

    /* ---- Modals : pleine largeur ------------------------------------------ */
    .modal-box,
    #panel-params,
    .note-box {
        width: calc(100vw - 24px) !important;
        max-width: 100%;
        margin: 12px;
        padding: 18px;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-type-grid { grid-template-columns: 1fr; gap: 10px; }
    .modal-type-btn  { padding: 18px 14px; }

    /* ---- Zone notes ------------------------------------------------------- */
    #zone-notes { padding: 6px 12px; font-size: 12px; }
}

/* Modal params — footer avec déconnexion / annuler / enregistrer */
.params-footer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
    flex-wrap: wrap;
}
.params-btn-deco {
    margin-right: auto;  /* pousse déconnexion à gauche, Annuler+Enregistrer à droite */
}

/* =============================================================================
   SPLIT TABLEAU MOBILE
   ============================================================================= */
@media (max-width: 768px) {

    /* Outer : scroll horizontal uniquement, vertical = body */
    .tbl-split-outer {
        display: block;
        width: 100%;
        overflow-x: visible;   /* sticky fonctionne — scroll horizontal sur les lignes via touch */
        overflow-y: visible;
    }

    /* Ligne générique = grille 160px + 12 mois + total */
    .tbl-split-row {
        display: grid;
        grid-template-columns: 160px repeat(12, var(--col-month)) var(--col-total);
        align-items: center;
        border-bottom: 1px solid var(--border);
        background: var(--bg-row);
        box-sizing: border-box;
        min-width: max-content;
    }

    /* Première cellule de chaque ligne = label sticky gauche */
    .tbl-split-row > :first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        background: var(--bg-row);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .tbl-split-row.charge-row:nth-child(even) > :first-child { background: var(--bg-row-alt); }
    .tbl-split-row.charge-row:nth-child(odd)  > :first-child { background: var(--bg-row); }
    .tbl-split-row.total-row   > :first-child { background: var(--bg-card); }
    .tbl-split-row.salaire-row > :first-child { background: var(--bg-panel); }
    .tbl-split-row.reste-row   > :first-child { background: var(--bg-panel); }
    .tbl-split-row.grand-total > :first-child { background: var(--bg-card); }
    .tbl-split-row.var-row     > :first-child { background: var(--bg-row); }

    /* Header */
    .tbl-split-row.tab-header {
        position: sticky;
        top: 44px;
        z-index: 8;
        background: var(--bg-card) !important;
        border-bottom: 1px solid var(--border-light);
    }
    /* Toutes les cellules du header ont un fond opaque */
    .tbl-split-row.tab-header > * {
        background: var(--bg-card);
    }
    .tbl-split-row.tab-header > :first-child {
        background: var(--bg-card);
        z-index: 9;
        font-weight: 700;
        font-size: 11px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        text-align: center;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* Types de lignes */
    .tbl-split-row.salaire-row {
        background: var(--bg-panel);
        grid-template-columns: 160px repeat(12, var(--col-month)) var(--col-total) !important;
    }
    .tbl-split-row.salaire-row > :first-child {
        background: var(--bg-panel) !important;  /* opaque — cache ce qui est derrière */
        font-size: 11px !important;
        color: var(--txt-muted) !important;
        font-style: italic;
        padding: 0 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: sticky;
        left: 0;
        z-index: 4;
    }
    .tbl-split-row.total-row   { background: var(--bg-card) !important; border-top: 2px solid var(--border-light); }
    .tbl-split-row.total-row > *   { background: var(--bg-card); }
    .tbl-split-row.total-row > :first-child   { background: var(--bg-card); font-weight: 700; font-size: 11px; }
    .tbl-split-row.reste-row   { background: var(--bg-panel); border-top: 2px solid rgba(239,68,68,0.4); }
    .tbl-split-row.reste-row > :first-child   { background: var(--bg-panel); color: #ef4444; font-weight: 700; font-size: 11px; }
    .tbl-split-row.grand-total { background: var(--bg-card) !important; border-top: 2px solid rgba(226,184,111,0.5); }
    .tbl-split-row.grand-total > * { background: var(--bg-card); }
    .tbl-split-row.grand-total > :first-child { background: var(--bg-card); }
    .tbl-split-row.charge-row > :first-child  { background: var(--bg-row); }
    .tbl-split-row.var-row > :first-child     { background: var(--bg-row); }

    /* Masquer les actions de ligne sur mobile (pas de place) */
    .row-actions { display: none !important; }
    .var-expand-icon { display: none; }

    /* Séparateur catégorie */
    .tbl-split-cat-row {
        display: grid;
        grid-template-columns: 160px repeat(12, var(--col-month)) var(--col-total);
        min-width: max-content;
        border-top: 2px solid var(--border-light);
        border-bottom: 1px solid var(--border);
        box-sizing: border-box;
        height: 32px;
        /* background fourni en inline style JS — opaque et uniforme */
    }
    .tbl-split-cat-row > :first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        padding: 0;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        /* background fourni en inline style JS — même valeur que le row */
    }

    /* Détails variables */
    .tbl-split-detail-row {
        display: grid;
        grid-template-columns: 160px repeat(12, var(--col-month)) var(--col-total);
        align-items: center;
        border-bottom: 1px solid rgba(30,45,66,0.4);
        background: rgba(0,0,0,0.18);
        box-sizing: border-box;
        min-width: max-content;
    }
    .tbl-split-detail-row > :first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        background: rgba(0,0,0,0.18);
    }
}

    /* Tableau récap annuel — cellules sur une ligne */
    .recap-table {
        font-size: 11px;
        white-space: nowrap;
    }
    .recap-table th,
    .recap-table td {
        padding: 6px 8px;
        white-space: nowrap;
    }

/* =============================================================================
   MODULE ABONNEMENTS
   ============================================================================= */

/* ---- Vue layout ---- */
#vue-abonnements {
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#vue-abonnements.active { display: flex; }

/* ---- Toolbar ---- */
.abo-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-panel);
}
.abo-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.abo-filter-group-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--txt-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.abo-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border-light);
    flex-shrink: 0;
}
.abo-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.abo-filter-btn {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--txt-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-sans);
}
.abo-filter-btn.active,
.abo-filter-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ---- Liste / grid cards ---- */
.abo-liste {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-content: start;
}

/* ---- Carte abonnement ---- */
.abo-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s;
}
.abo-card:hover { border-color: var(--accent); }
.abo-card.statut-pause   { opacity: .65; }
.abo-card.statut-resilie { opacity: .4; filter: grayscale(.5); }

.abo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.abo-card-nom {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.abo-cat-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.abo-card-montant {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--txt-primary);
    white-space: nowrap;
}
.abo-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 11px;
    color: var(--txt-muted);
}
.abo-meta-chip {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 7px;
}
.abo-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.abo-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.abo-badge-alerte  { background: rgba(239,68,68,.15);  color: #ef4444; }
.abo-badge-warning { background: rgba(245,158,11,.15); color: #f59e0b; }
.abo-badge-resil   { background: rgba(99,102,241,.15); color: #818cf8; }
.abo-badge-injection { background: rgba(16,185,129,.1); color: #10b981; font-size: 10px; }

.abo-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.abo-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--txt-muted);
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-sans);
}
.abo-btn:hover { background: var(--bg-input); color: var(--txt-primary); }
.abo-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
.abo-btn-url {
    margin-left: auto;
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-family: var(--font-sans);
    transition: all .15s;
}
.abo-btn-url:hover { background: var(--accent-glow); }

/* ---- Indicateur injection dans modal ---- */
.abo-injection-info {
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.25);
    color: #10b981;
    font-size: 12px;
    line-height: 1.5;
}

/* ---- Modal abonnement ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-abonnement-box {
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.modal-close {
    background: none;
    border: none;
    color: var(--txt-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all .15s;
}
.modal-close:hover { color: var(--txt-primary); background: var(--bg-hover); }

/* ---- Widget dashboard abonnements ---- */
.dash-card-full { grid-column: 1 / -1; }
.dash-abo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.dash-abo-item:last-child { border-bottom: none; }
.dash-abo-nom  { flex: 1; color: var(--txt-primary); }
.dash-abo-badges { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .abo-liste { grid-template-columns: 1fr; padding: 10px; }
    .modal-abonnement-box { width: calc(100vw - 24px) !important; }
    #vue-abonnements { --col-label: 120px; }
    .abo-toolbar { gap: 6px; padding: 8px 12px; }
    .abo-toolbar-sep { display: none; }
    .abo-filter-group { flex-wrap: wrap; }
}

/* =============================================================================
   UTILITAIRES MODAUX — classes extraites des inline styles
   ============================================================================= */
.select-inline {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-family: var(--font-sans);
    padding-right: 35px;
}
.select-inline-sm {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-family: var(--font-sans);
}
.modal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.chart-loading {
    display: none;
    font-size: 10px;
    color: var(--txt-muted);
}
.modal-textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--txt-primary);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    font-family: var(--font-sans);
    resize: vertical;
    min-height: 60px;
    outline: none;
    width: 100%;
}

/* =============================================================================
   KPI INFO ICON — icône ℹ avec infobulle
   ============================================================================= */
.kpi-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(148,163,184,.15);
    border: 1px solid rgba(148,163,184,.3);
    color: var(--txt-muted);
    font-size: 9px;
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    line-height: 1;
}
.kpi-info:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

/* Tooltip */


/* Flèche du tooltip */




/* Ajustement position pour les KPI en bas de page (tooltip vers le haut par défaut,
   mais on force vers le bas pour les KPI stats qui sont en haut de vue) */



/* Sur mobile : tooltip centré, plus large */



.dash-kpis .dash-kpi:nth-child(1) .kpi-info::before,
.dash-kpis .dash-kpi:nth-child(2) .kpi-info::before,
.stats-kpi-row .stat-kpi-card:nth-child(1) .kpi-info::before,
.stats-kpi-row .stat-kpi-card:nth-child(2) .kpi-info::before {
    left: 7px;
    transform: none;
}

/* Tooltip : derniers KPIs (bord droit) → aligner à droite */

.dash-kpis .dash-kpi:nth-child(5) .kpi-info::before,
.dash-kpis .dash-kpi:nth-child(6) .kpi-info::before,
.stats-kpi-row .stat-kpi-card:nth-child(5) .kpi-info::before,
.stats-kpi-row .stat-kpi-card:nth-child(6) .kpi-info::before {
    left: auto;
    right: 7px;
    transform: none;
}

/* ---- Gestion catégories inline dans modal abonnement ---- */
#abo-cats-panel { transition: none; }
#abo-new-cat-nom:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ---- Boutons mode injection (Existante / Nouvelle) ---- */
.inject-mode-btn {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--txt-muted);
    font-size: 12px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition);
}
.inject-mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.inject-mode-btn:not(.active):hover {
    background: var(--bg-hover);
    color: var(--txt-primary);
}

/* ---- Boutons actions carte abonnement ---- */
.abo-actions-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.abo-actions-row--secondary {
    border-top: 1px solid var(--border);
    padding-top: 7px;
    margin-top: 2px;
}
.abo-btn-sm {
    font-size: 11px;
    padding: 3px 9px;
}
.abo-btn-done {
    color: var(--paid);
    border-color: rgba(34,197,94,.3);
    cursor: default;
    font-size: 11px;
}
.abo-btn-warn {
    color: #f59e0b;
    border-color: rgba(245,158,11,.3);
}
.abo-btn-warn:hover {
    background: rgba(245,158,11,.1);
    color: #f59e0b;
    border-color: #f59e0b;
}
.abo-btn-danger {
    color: #ef4444;
    border-color: rgba(239,68,68,.3);
}
.abo-btn-danger:hover {
    background: rgba(239,68,68,.1);
    color: #ef4444;
    border-color: #ef4444;
}

/* ---- Ligne SMIC dans tableau salaire ---- */
/* Total général tableau salaire — style identique au grand-total des charges fixes */
.sal-grand-total {
    margin-top: 14px;
    border-top: 2px solid rgba(16,185,129,0.7) !important;
    background: rgba(15,23,42,0.98);
    position: relative;
    z-index: 2;
    box-shadow: -999px 0 0 0 rgba(15,23,42,0.98), 999px 0 0 0 rgba(15,23,42,0.98),
                0 -14px 0 0 rgba(0,0,0,0.45);
}
/* Hachures dans le gap */
.sal-grand-total::before {
    content: '';
    position: absolute;
    top: -14px; left: 0; right: 0; height: 14px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255,255,255,0.12) 4px,
        rgba(255,255,255,0.12) 6px
    );
    pointer-events: none;
}
.sal-grand-label {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #10b981 !important;
    background: var(--bg-card);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sal-grand-total .sal-grid-cell { color: #10b981 !important; }

/* Lignes Brut et Écart — hauteur réduite */
.sal-row-slim {
    min-height: 28px !important;
}
.sal-row-slim .col-label {
    font-size: 11px !important;
    font-weight: 500 !important;
}
.sal-row-slim .sal-grid-cell {
    font-size: 11.5px !important;
}

/* Lignes totaux — hauteur réduite */
.sal-total-inter,
.sal-grand-total {
    min-height: 32px !important;
}
/* Toutes les cellules des totaux intermédiaires en orange */
.sal-total-inter .sal-grid-cell,
.sal-total-inter .sal-grid-cell * {
    color: #e2b96f !important;
}
/* Totaux annuels en bold */
.sal-total-inter .cell-total .total-annuel-val,
.sal-grand-total .cell-total .total-annuel-val {
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* Séparateur employeur dans le tableau salaire — style cat-separator */
.sal-emp-separator {
    display: flex;
    align-items: center;
    height: 38px;
    border-top: 2px solid rgba(59,130,246,0.35);
    border-bottom: 1px solid rgba(59,130,246,0.15);
    background: rgba(59,130,246,0.06);
    color: var(--accent);
    margin-top: 2px;
    width: 100%;
}
.sal-emp-sep-line {
    flex: 1;
    height: 1px;
    background: var(--accent);
    opacity: 0.2;
    margin: 0 16px;
}
.sal-emp-sep-content {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.smic-row {
    opacity: .65;
    min-height: 24px !important;  /* moitié de la hauteur normale (48px) */
}
.smic-row .col-label {
    font-style: italic;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    min-height: 24px !important;
}
.smic-row .sal-cell,
.smic-row .smic-cell {
    font-size: 10px !important;
    color: var(--txt-muted);
    min-height: 24px !important;
    height: 24px !important;
}
.smic-row .cell-total {
    font-size: 10px !important;
    border-left: none !important;
    background: transparent !important;
    min-height: 24px !important;
}

/* ---- Modal confirmation générique ---- */
#modal-confirm .modal-box {
    animation: confirmAppear 0.15s ease;
}
@keyframes confirmAppear {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
#confirm-btn-ok {
    transition: background 0.15s, box-shadow 0.15s;
}



/* ============================================================
   PALETTE RECHERCHE GLOBALE (Ctrl+K)
   ============================================================ */
.recherche-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(8,12,20,0.72);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 9vh;
    backdrop-filter: blur(2px);
}
.recherche-box {
    width: 560px; max-width: calc(100vw - 24px);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7);
    display: flex; flex-direction: column;
    max-height: 78vh;
}
.recherche-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}
.recherche-loupe { font-size: 16px; opacity: 0.7; }
#recherche-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #e4ebf5; font-size: 15px; font-family: inherit;
}
#recherche-input::placeholder { color: #5f6b7e; }
.recherche-esc {
    font-size: 11px; color: #5f6b7e;
    border: 1px solid var(--border-light); border-radius: 5px;
    padding: 3px 7px; background: transparent; cursor: pointer;
}
.recherche-esc:hover { color: #97a3b4; border-color: #34465e; }
.recherche-filtres {
    display: flex; gap: 6px; padding: 9px 16px; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--border-light);
}
.recherche-pill {
    font-size: 11.5px; color: var(--txt-muted);
    background: transparent; border: 1px solid transparent;
    border-radius: 999px; padding: 3px 11px; cursor: pointer;
    transition: background .12s, color .12s;
}
.recherche-pill:hover { color: #cdd6e3; background: rgba(255,255,255,0.04); }
.recherche-pill.active { color: #fff; background: var(--accent); }
.recherche-annee-select {
    margin-left: auto;
    font-size: 11.5px; color: #cdd6e3;
    background: var(--bg-panel); border: 1px solid var(--border-light);
    border-radius: 6px; padding: 3px 8px; cursor: pointer; outline: none;
}
.recherche-resultats { overflow-y: auto; flex: 1; min-height: 80px; }
.recherche-vide, .recherche-loading {
    text-align: center; color: #5f6b7e; font-size: 13px;
    padding: 32px 16px;
}
.recherche-groupe-titre {
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: #5f6b7e; padding: 10px 16px 4px;
}
.recherche-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 16px; cursor: default;
    border-left: 2px solid transparent;
}
.recherche-item.selected { background: rgba(59,130,246,0.10); border-left-color: var(--accent); }
.recherche-item-ico { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.recherche-item-main { flex: 1; min-width: 0; }
.recherche-item-lbl {
    font-size: 13.5px; color: #e4ebf5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recherche-item-ctx { font-size: 11.5px; color: #8896a8; }
.recherche-item-montant { font-size: 13.5px; color: #e4ebf5; font-weight: 600; flex-shrink: 0; }
.recherche-footer {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 16px; border-top: 1px solid var(--border-light);
    font-size: 11px; color: #5f6b7e;
}
.recherche-footer b { color: #97a3b4; }
.recherche-total { margin-left: auto; }
.recherche-total b { color: #cdd6e3; }
.btn-top-icon { padding: 6px 9px !important; }
@media (max-width: 768px) {
    .recherche-overlay { padding-top: 4vh; }
    .recherche-box { max-height: 88vh; }
}

/* ============================================================
   BILAN ANNUEL (dashboard)
   ============================================================ */
.dash-annuel-section {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-light);
}
.dash-annuel-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px;
}
.dash-annuel-titre {
    font-size: 13px; font-weight: 600; color: var(--txt-primary);
    letter-spacing: 0.02em;
}
.dash-annuel-periode {
    font-size: 11px; color: var(--txt-muted); text-transform: capitalize;
}
.dash-annuel-tuiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.dash-annuel-tuile {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 13px 14px;
    display: flex; flex-direction: column; gap: 5px;
    min-width: 0;
    position: relative;
    overflow: hidden;
}
.dash-annuel-tuile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.dash-an-revenus::before { background: var(--paid); }
.dash-an-charges::before { background: #3b82f6; }
.dash-an-epargne::before { background: #e2b96f; }
.dash-an-topcat::before  { background: #8b5cf6; }
.dash-an-compare::before { background: #ef4444; }
/* Top catégorie = la plus coûteuse → valeur en rouge */
.dash-an-topcat .dash-annuel-val { color: #ef4444; }
.dash-annuel-lbl {
    font-size: 11px; color: var(--txt-muted); font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-annuel-val {
    font-family: var(--font-mono); font-size: 19px; font-weight: 700;
    color: var(--txt-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-annuel-val.positif { color: var(--paid); }
.dash-annuel-val.negatif { color: #ef4444; }
.dash-annuel-sub {
    font-size: 11px; color: var(--txt-muted);
    font-family: var(--font-mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Chevron repli : invisible sur desktop, visible sur mobile */
.dash-annuel-chevron {
    display: none;
    font-size: 10px;
    margin-right: 6px;
    color: var(--txt-muted);
    transition: transform 0.18s ease;
    display: none;
}
@media (max-width: 1100px) {
    .dash-annuel-tuiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .dash-annuel-tuiles { grid-template-columns: repeat(2, 1fr); }
    .dash-annuel-val { font-size: 17px; }

    /* Mobile : section repliable */
    .dash-annuel-header {
        cursor: pointer;
        user-select: none;
        padding: 4px 0;
    }
    .dash-annuel-chevron {
        display: inline-block;
        transform: rotate(0deg);
    }
    .dash-annuel-section.collapsed .dash-annuel-chevron {
        transform: rotate(-90deg);
    }
    .dash-annuel-section.collapsed .dash-annuel-tuiles,
    .dash-annuel-section.collapsed .dash-annuel-periode {
        display: none;
    }
    .dash-annuel-section.collapsed {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
}