/* ==========================================================================
   libracalc — feuille de style commune (accueil, /budget et pages dérivées)
   Direction « Relevé » : papier, filets fins, colonnes alignées, chiffres à
   chasse fixe, titres en serif. Tout passe par les variables de :root.
   ========================================================================== */

/* ---------- Polices (hébergées localement, sous-ensemble latin) ---------- */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/hanken-grotesk.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/newsreader-roman.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/newsreader-italic.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plex-mono-500.woff2) format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Couleurs — clair */
  --paper: #FAF7F0;
  --paper-2: #F2EEE3;          /* aplat discret (lignes survolées, bandeaux) */
  --ink: #1B2433;
  --ink-2: #3A4254;            /* texte courant adouci */
  --mut: #596070;              /* texte secondaire */
  --rule: #DAD4C5;             /* filets décoratifs */
  --line: #8C8778;             /* contours de champs et boutons (≥ 3:1) */
  --good: #2C6A4D;
  --good-bg: #E5EFE6;
  --warn: #7A5200;             /* ocre : attention, jamais rouge */
  --warn-bg: #F4EAD2;
  --focus: #1B2433;

  /* Typographie */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.625rem;    /* 26 */
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-answer: clamp(2.5rem, 1.6rem + 4.2vw, 3.75rem);

  /* Rayons (volontairement très petits : un relevé n'est pas arrondi) */
  --r-1: 2px;
  --r-2: 4px;

  /* Espacements */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  --gutter: 20px;
  --max: 1120px;
  --tap: 44px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* Sombre — suit le réglage du système */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161B;
    --paper-2: #1B1E25;
    --ink: #ECE8DD;
    --ink-2: #C9C6BC;
    --mut: #A0A4AD;
    --rule: #30343D;
    --line: #6F7581;
    --good: #8CC7A5;
    --good-bg: #1C2A24;
    --warn: #E2B45C;
    --warn-bg: #2B2418;
    --focus: #ECE8DD;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.skip { position: absolute; left: var(--s-4); top: -100px; display: inline-flex; align-items: center; min-height: var(--tap); background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-4); z-index: 20; }
.skip:focus { top: var(--s-2); }

/* ---------- En-tête ---------- */
.site-header { border-bottom: 1px solid var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--s-4); }
.wordmark { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.wordmark span { color: var(--good); }
.site-header nav { display: flex; gap: var(--s-1); margin-right: calc(var(--s-3) * -1); }
.site-header nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); font-size: var(--fs-sm); color: var(--mut); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Introduction ---------- */
.hero { padding: var(--s-6) 0 var(--s-5); }
@media (min-width: 720px) { .hero { padding: var(--s-8) 0 var(--s-6); } }
.hero h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; max-width: 21ch; text-wrap: balance; }
.hero .lede { margin-top: var(--s-4); font-size: var(--fs-md); color: var(--ink-2); max-width: 62ch; }

/* ---------- Outil : mise en page ---------- */
.tool { padding-bottom: var(--s-8); }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
@media (min-width: 900px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7) var(--s-8); align-items: start; }
  .results { border-left: 1px solid var(--rule); padding-left: var(--s-7); margin-left: calc(var(--s-7) * -1 + var(--s-3)); }
}
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--ink); }
.block-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; display: block; padding-bottom: var(--s-2); }
.block-title + .block-title, .item-block + .item-block { margin-top: var(--s-7); }
.item-block + .item-block { margin-top: var(--s-7); }
.item-block > .block-head { margin-bottom: 0; }
.sec-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-lg); margin: var(--s-7) 0 var(--s-1); }
.sec-sub { font-size: var(--fs-sm); color: var(--mut); margin-bottom: var(--s-3); }

/* ---------- Boutons ---------- */
.btn, .add-row {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-5);
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-1);
  font-weight: 600; font-size: var(--fs-base);
  transition: background-color .15s, color .15s;
}
.btn:hover, .add-row:hover { background: var(--ink); color: var(--paper); }
.add-row { width: 100%; margin-top: var(--s-2); }
.link-btn {
  background: none; border: 0; min-height: var(--tap); padding: 0 var(--s-1);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.block-head .link-btn { align-self: center; margin-bottom: var(--s-1); }

/* ---------- Lignes de saisie (dettes, revenus, dépenses) ---------- */
.debt-row, .item-row { padding: var(--s-4) 0 var(--s-4); border-bottom: 1px solid var(--rule); }
.row-top { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.f-name {
  flex: 1; min-width: 0; height: var(--tap);
  background: transparent; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0;
  font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em;
  padding: 0 var(--s-1);
}
.f-name::placeholder { color: var(--mut); font-weight: 400; }
.f-name:focus-visible { outline-offset: 0; border-bottom-style: solid; }
.remove-row {
  flex: none; min-width: var(--tap); height: var(--tap); padding: 0 var(--s-2);
  background: none; border: 0; color: var(--mut); font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px;
}
.remove-row:hover { color: var(--ink); }

.nums { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr; border: 1px solid var(--line); border-radius: var(--r-1); }
.nums.cols-2 { grid-template-columns: 1fr 1fr; }
.cell { display: flex; flex-direction: column; justify-content: flex-start; min-height: 66px; padding: var(--s-2) var(--s-3) 0; cursor: text; min-width: 0; }
.cell + .cell { border-left: 1px solid var(--line); }
.cell:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.lbl { font-size: var(--fs-xs); color: var(--mut); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inp { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.inp input {
  flex: 1; min-width: 0; width: 100%; height: var(--tap); margin-top: -2px;
  background: transparent; border: 0; outline: 0; border-radius: 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 500;
}
.inp input::placeholder { color: var(--mut); font-weight: 400; }
.unit { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--mut); flex: none; }

.sel { position: relative; display: block; }
.sel select {
  appearance: none; -webkit-appearance: none; width: 100%; height: var(--tap); margin-top: -2px;
  background: transparent; border: 0; outline: 0; border-radius: 0; padding: 0 var(--s-5) 0 0;
  font-size: var(--fs-base); font-weight: 500; cursor: pointer;
}
.sel select option { background: var(--paper); color: var(--ink); }
.sel::after {
  content: ''; position: absolute; right: 4px; top: calc(50% + 1px); width: 7px; height: 7px; margin-top: -1px;
  border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.debt-totals { display: none; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--paper-2); border-left: 2px solid var(--ink); font-size: var(--fs-sm); color: var(--ink-2); }
.debt-totals.visible { display: block; }
.debt-totals b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }

/* ---------- Budget (champ principal) + méthode ---------- */
.budget-block { margin-top: var(--s-7); }
.budget-line { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-4) 0 var(--s-3); border-bottom: 1px solid var(--rule); }
.budget-field { display: flex; align-items: baseline; gap: var(--s-2); border-bottom: 2px solid var(--ink); cursor: text; }
.budget-field:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; }
.budget-field input {
  width: 6.5ch; min-width: 0; height: 52px;
  background: transparent; border: 0; outline: 0; padding: 0;
  font-family: var(--font-mono); font-size: 2rem; font-weight: 500; letter-spacing: -0.02em;
}
.budget-field input::placeholder { color: var(--mut); }
.budget-suffix { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--mut); }
.field-label { display: block; font-size: var(--fs-sm); color: var(--mut); margin: var(--s-5) 0 var(--s-2); }

.method-toggle { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); border-radius: var(--r-1); overflow: hidden; }
.method-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 56px; padding: var(--s-2) var(--s-2);
  background: transparent; border: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; text-align: center;
}
.method-btn small { font-size: var(--fs-xs); font-weight: 400; color: var(--mut); }
.method-btn + .method-btn { border-left: 1px solid var(--ink); }
.method-btn:hover { background: var(--paper-2); }
.method-btn[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.method-btn[aria-checked="true"] small { color: var(--paper); opacity: .8; }
.method-btn:focus-visible { outline-offset: -4px; outline-color: var(--paper); }

/* ---------- Résultat ---------- */
.kicker { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--mut); font-weight: 500; }
.answer { margin: var(--s-2) 0 var(--s-4); font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-answer); line-height: 1.03; letter-spacing: -0.025em; text-wrap: balance; }
.answer em { font-style: italic; color: var(--good); display: inline-block; }
.answer.is-note { font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.015em; }
.answer .hl { color: var(--good); font-family: var(--font-mono); font-size: .8em; letter-spacing: -0.04em; white-space: nowrap; }
.answer .hl.neg, .answer .hl-warn { color: var(--warn); }
.sub-answer { font-size: var(--fs-base); color: var(--ink-2); max-width: 52ch; }
.sub-answer p + p { margin-top: var(--s-2); }
.sub-answer b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.empty-actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

.metrics { display: flex; margin-top: var(--s-5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.metric { flex: 1; padding: var(--s-3) 0; font-size: var(--fs-xs); color: var(--mut); }
.metric + .metric { border-left: 1px solid var(--rule); padding-left: var(--s-4); }
.metric .num { display: block; font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 2px; }
.metric .lbl { font-size: var(--fs-sm); color: var(--mut); white-space: normal; }

.compare { width: 100%; border-collapse: collapse; }
.compare th { font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; font-weight: 500; color: var(--mut); text-align: right; padding: var(--s-2) 0; border-bottom: 1px solid var(--ink); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare td { height: 52px; border-bottom: 1px solid var(--rule); text-align: right; font-size: var(--fs-md); }
.compare td:first-child { font-weight: 500; }
.compare td.m { font-family: var(--font-mono); font-size: var(--fs-sm); }
.compare td .tag { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--good); line-height: 1.1; margin-top: 2px; }
.compare tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--ink); padding-left: var(--s-3); }
.compare tr.is-best td { background: var(--good-bg); color: var(--good); }
.compare tr.is-best td:first-child { font-weight: 600; padding-left: var(--s-3); }
.compare tr.is-best td:last-child { padding-right: var(--s-3); }
.compare tr.is-best.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.compare th:last-child, .compare td:last-child { padding-right: var(--s-3); }
.gain { margin-top: var(--s-3); font-size: var(--fs-base); }
.gain b { font-family: var(--font-mono); font-weight: 500; color: var(--good); }

.chart-wrap { margin-top: var(--s-2); }
#chart { display: block; width: 100%; height: 168px; overflow: visible; }
#chart text { font-family: var(--font-mono); font-size: 11px; fill: var(--mut); }
#chart .axis { stroke: var(--ink); stroke-width: 1; }
#chart .grid { stroke: var(--rule); stroke-width: 1; }
#chart .plan { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#chart .base { fill: none; stroke: var(--mut); stroke-width: 1.5; stroke-dasharray: 4 4; }
#chart .end { fill: var(--good); }
#chart text.end-label { fill: var(--good); font-weight: 500; }
#chart text { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-size: var(--fs-xs); color: var(--mut); margin-top: var(--s-2); }
.legend-dot { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--ink); vertical-align: middle; margin-right: var(--s-2); }
.legend-dot.dashed { border-top: 2px dashed var(--mut); }

.order-item { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-base); }
.order-item:first-child { border-top: 1px solid var(--ink); font-weight: 600; }
.order-item .amt { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--mut); white-space: nowrap; font-weight: 400; }
.order-item .n { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--mut); margin-right: var(--s-2); font-weight: 400; }

.schedule-item { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.schedule-item:first-child { border-top: 1px solid var(--ink); }
.schedule-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--mut); padding-top: 2px; }
.schedule-title { font-size: var(--fs-base); }
.schedule-title b { font-weight: 600; }
.schedule-period { font-size: var(--fs-sm); color: var(--mut); margin-top: 2px; }

.note { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--mut); line-height: 1.5; }

/* Diagnostic 50/30/20 */
.diag-row { padding: var(--s-3) 0 var(--s-3); border-bottom: 1px solid var(--rule); }
.diag-row:first-child { border-top: 1px solid var(--ink); }
.diag-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-2); }
.diag-row-top .type { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-lg); }
.diag-row-top .pct { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--mut); text-align: right; }
.diag-bar-wrap { position: relative; height: 12px; background: var(--paper-2); border: 1px solid var(--rule); }
.diag-bar { height: 100%; background: var(--ink); transition: width .35s ease; }
.diag-bar.ok { background: var(--good); }
.diag-target { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.diag-status { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); }
.diag-status.ok { color: var(--good); font-weight: 500; }
.diag-status.over { color: var(--warn); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .diag-bar { transition: none; } }

/* Barre flottante (mobile) : rappelle la date quand le résultat est hors de vue */
.mini {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: none; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--ink);
}
.mini.is-on { display: flex; }
@media (min-width: 900px) { .mini.is-on { display: none; } }
.mini-text { font-size: var(--fs-sm); color: var(--mut); line-height: 1.2; }
.mini-text b { display: block; font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.mini a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); border: 1px solid var(--ink); border-radius: var(--r-1); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }

/* ---------- Sections de texte ---------- */
.section-title { font-size: var(--fs-xl); letter-spacing: -0.015em; margin-bottom: var(--s-6); }

.explain { max-width: var(--max); margin: 0 auto; padding: var(--s-7) var(--gutter); display: grid; grid-template-columns: 1fr; gap: 0; position: relative; }
.explain::before { content: ''; position: absolute; top: var(--s-7); left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--ink); }
.explain > div:first-child { padding-top: var(--s-5); }
.explain > div { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.explain h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-2); }
.explain p { color: var(--ink-2); max-width: 60ch; }
@media (min-width: 860px) {
  .explain { grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-6); padding-top: var(--s-6); }
  .explain > div { border-bottom: 0; padding: var(--s-5) 0 0; }
}

.howto { border-top: 1px solid var(--rule); }
.howto-inner, .faq-inner, .trust-inner, .cross-link, .faq, .howto .wrap { max-width: 920px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.howto-inner { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.howto-steps { border-top: 1px solid var(--ink); }
.howto-step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-3); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.howto-num { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--mut); padding-top: 2px; }
.howto-step h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-2); }
.howto-inner > p, .howto-step p, .howto-inner ul { color: var(--ink-2); max-width: 66ch; }
.howto-inner ul { padding-left: var(--s-5); line-height: 1.8; }
.howto-inner ul li { margin-bottom: var(--s-1); }
.howto-inner ul li b { color: var(--ink); }

.faq { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.faq-item { border-top: 1px solid var(--rule); padding: var(--s-5) 0; }
.faq-item:first-of-type { border-top: 1px solid var(--ink); }
.faq-item h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-2); max-width: 40ch; }
.faq-item p { color: var(--ink-2); max-width: 66ch; }
.faq + .faq { padding-top: 0; padding-bottom: var(--s-7); }
.faq .section-title + ul { color: var(--ink-2); padding-left: var(--s-5); line-height: 2; }
.faq + .faq .section-title { font-size: var(--fs-lg); margin-bottom: var(--s-3); }

.trust { border-top: 1px solid var(--rule); }
.trust-inner { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.trust p { font-size: var(--fs-sm); line-height: 1.7; color: var(--mut); max-width: 74ch; }
.trust em { color: var(--ink-2); }

.cross-link { padding-top: 0; padding-bottom: 0; }
.cross-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
:not(.cross-link) + .cross-link { padding-top: var(--s-6); }
:not(.cross-link) + .cross-link .cross-card { border-top: 1px solid var(--ink); }
.cross-link:has(+ :not(.cross-link)) { padding-bottom: var(--s-7); }
.cross-card p { max-width: 58ch; color: var(--ink-2); }
.cross-card p b { color: var(--ink); font-weight: 600; }
.cross-card a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
@media (min-width: 720px) {
  .cross-card { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-6); }
  .cross-card a { white-space: nowrap; }
}

.site-footer { border-top: 1px solid var(--ink); }
.site-footer .wrap { padding-top: var(--s-5); padding-bottom: var(--s-7); font-size: var(--fs-sm); color: var(--mut); line-height: 1.7; max-width: var(--max); }
.site-footer a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: var(--tap); }
@media (max-width: 899px) { body.has-mini { padding-bottom: 76px; } }

/* ---------- Pages légales ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-8); }
.legal h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; margin-bottom: var(--s-2); }
.legal .updated { font-size: var(--fs-sm); color: var(--mut); margin-bottom: var(--s-7); }
.legal h2 { font-size: var(--fs-lg); font-weight: 600; margin: var(--s-7) 0 var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.legal p, .legal li { color: var(--ink-2); margin-bottom: var(--s-3); max-width: 66ch; }
.legal ul { padding-left: var(--s-5); margin-bottom: var(--s-3); }
.legal .placeholder { background: var(--warn-bg); border-left: 2px solid var(--warn); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); color: var(--ink); margin: var(--s-3) 0 var(--s-5); }
.legal a { color: var(--ink); }
.legal .highlight { border: 1px solid var(--ink); border-left-width: 3px; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); color: var(--ink); }
.legal table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 var(--s-5); font-size: var(--fs-sm); }
.legal th, .legal td { text-align: left; padding: var(--s-3) var(--s-2) var(--s-3) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal th { color: var(--mut); font-weight: 600; border-bottom: 1px solid var(--ink); }
.back { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-sm); color: var(--mut); text-decoration: none; }
.back:hover { color: var(--ink); text-decoration: underline; }

@media print { .mini, .site-header nav, .add-row, .remove-row { display: none !important; } }

/* Réserve la hauteur d'une ligne avant que le script ne l'insère (évite le saut de mise en page) */
#debtRows:empty, #revenusRows:empty, #depensesRows:empty { min-height: 153px; }