/* V29 — « Ce que ça pèse » (parts de la paie) et tableaux sans défilement horizontal sur mobile. */

/* ---------- % dép. · % paie ---------- */
.shares { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.share-chip { color: var(--ink-3); font-weight: 600; }
.share-chip.pay { color: var(--accent-text, var(--accent)); }
.share-dot { color: var(--ink-3); }
.shares .tip { vertical-align: 0; }
.shares .tip-btn { font-size: 11px; }
.mrow-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.mrow-amt small.block { font-weight: 500; }

/* ---------- Carte « Où va ta paie » ---------- */
.payshare-card .card-head h2 { display: flex; align-items: center; gap: 4px; }
.payshare-card .card-head .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.payshare-card .card-head .seg button { white-space: nowrap; }
.pay-sentence { margin: 0 0 10px; font-size: 15px; line-height: 1.45; font-weight: 500; }
.pay-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.pay-seg { display: block; flex: 0 0 auto; height: 100%; min-width: 0; transition: flex-basis .35s var(--ease, ease); }
.pay-seg + .pay-seg { box-shadow: inset 1px 0 0 var(--surface); }
.pay-seg.seg-reste { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--ink-3) 25%, transparent) 4px 6px); }
.pay-bar.is-over { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-critical) 55%, transparent); }
.pay-legend { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; font-size: 12.5px; }
@media (min-width: 700px) { .pay-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pay-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 6px; align-items: center; min-width: 0; }
.pay-legend li .sw { width: 10px; height: 10px; border-radius: 3px; margin: 0; }
.pay-legend li .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-legend li .muted.num { grid-column: 2 / -1; font-size: 11px; line-height: 1.2; }
.pay-leg-name { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.pay-legend li.over .pay-leg-name, .pay-legend li.over strong { color: var(--st-critical); }
.payshare-card .calc { margin-top: 4px; }

/* ---------- Accueil : la phrase du mois ---------- */
.pay-line { padding: 12px 16px; display: grid; gap: 4px; }
.pay-line-main { display: flex; align-items: flex-start; gap: 10px; }
.pay-emoji { font-size: 24px; line-height: 1.1; flex: none; }
.pay-line p { margin: 0; font-size: 14.5px; line-height: 1.45; font-weight: 500; }
.pay-line p .link { white-space: nowrap; }
.pay-line .calc { margin: 0 0 0 34px; }

/* ---------- Fiche produit / tiers : par mois · par an · % de ta paie ---------- */
.weigh { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 2px; }
.weigh-line { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.weigh-line strong { color: var(--ink-1); }
.weigh-line strong.pay { color: var(--accent-text, var(--accent)); }
.weigh-line .tip { vertical-align: 0; }
.weigh .calc { margin: 0; }

/* ---------- Tableaux Tendances (Par famille, Produits et étiquettes) ---------- */
.table.trends { table-layout: auto; width: 100%; max-width: 100%; }
.table.trends td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.table.trends .trend-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.table.trends .trend-name .sw { flex: none; }
.table.trends .sub-line { font-size: 11px; line-height: 1.3; white-space: normal; }
.table.trends .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table.trends .calc-row td { padding-top: 0; white-space: normal; }
.table.trends .calc-row .calc { margin: 0; }
.table.trends .calc-row:hover td { background: transparent; }
.table.trends tr.static.clickable:hover td { background: var(--surface-2, rgba(127, 127, 127, .06)); }
.m-only { display: none; }
.m-only .delta { font-size: 11px; }
@media (max-width: 560px) {
  .m-only { display: inline; }
  .table.trends .col-delta, .table.trends .col-total { display: none; }
  .table.trends .col-spark { width: 64px; padding-left: 2px; padding-right: 2px; }
  .table.trends .col-spark svg { width: 60px; }
  .table.trends th, .table.trends td { padding: 8px 4px; }
  .table.trends th:first-child, .table.trends td:first-child { padding-left: 0; }
  .table.trends th:last-child, .table.trends td:last-child { padding-right: 0; }
  .table.trends .calc-row td { padding-left: 0; }
}

/* ---------- Tableau des transactions (mobile) : largeurs fixes, plus de défilement horizontal ---------- */
@media (max-width: 480px) {
  .ledger-wrap { overflow-x: clip; background: var(--surface); }
  .ledger { table-layout: fixed; width: 100%; max-width: 100%; }
  .ledger th:first-child, .ledger td:first-child { width: 52px; padding-left: 6px; padding-right: 2px; }
  .ledger .col-bal { width: 60px; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
  .ledger th.col-bal { font-size: 9.5px; letter-spacing: .04em; }
  .ledger .col-amt { width: 76px; padding-right: 6px; }
  .ledger td.col-amt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ledger-m { display: flex; max-width: 100%; width: 100%; min-width: 0; }
  .ledger-m > span:last-child { flex: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ledger tfoot td:first-child { white-space: normal; }
}

/* ---------- Tableau annuel (Analyses › Année) : la colonne Épargné rejoint le Bilan sur mobile ---------- */
@media (max-width: 560px) {
  .analyses .grid-2 .table:not(.trends) th:nth-child(4), .analyses .grid-2 .table:not(.trends) td:nth-child(4) { display: none; }
  .analyses .grid-2 .table:not(.trends) th, .analyses .grid-2 .table:not(.trends) td { padding: 8px 4px; }
  .analyses .grid-2 .table:not(.trends) th:first-child, .analyses .grid-2 .table:not(.trends) td:first-child { padding-left: 0; }
  .analyses .grid-2 .table:not(.trends) th:last-child, .analyses .grid-2 .table:not(.trends) td:last-child { padding-right: 0; }
}

/* ---------- Totaux par famille (pivot) sur mobile ---------- */
@media (max-width: 560px) {
  .table.pivot { table-layout: auto; width: 100%; max-width: 100%; }
  .table.pivot th, .table.pivot td { padding: 8px 4px; }
  .table.pivot th:first-child, .table.pivot td:first-child { padding-left: 0; white-space: normal; overflow-wrap: anywhere; }
  .table.pivot th:last-child, .table.pivot td:last-child { padding-right: 0; }
  .table.pivot thead th { white-space: normal; line-height: 1.2; }
  .table.pivot .cat-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
}

/* ---------- Comparer : la grille tient aussi sur les très petits écrans (360 px) ---------- */
@media (max-width: 400px) {
  .cmp-row { grid-template-columns: minmax(64px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(48px, 56px); gap: 4px; }
  .cmp-row > span { min-width: 0; }
  .cmp-row small.block { white-space: normal; }
}