/* ============================================================
   Compoundly — simulateur de prêt immobilier
   Complète styles.css : seuls les éléments propres au prêt sont ici.
   ============================================================ */

:root, [data-theme="dark"]{
  --loan-cap:#10B981;
  --loan-int:#FBBF24;
  --loan-ass:#A78BFA;
  --loan-frais:#9CA3AF;
  --loan-comp:#38BDF8;
}
[data-theme="light"]{
  --loan-cap:#059669;
  --loan-int:#D97706;
  --loan-ass:#7C3AED;
  --loan-frais:#6B7280;
  --loan-comp:#0284C7;
}

/* Barre d'outils : mode + exemples */
.loan-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-5); margin-bottom:var(--sp-5); }
.loan-toolbar .presets{ margin:0; }
.loan-mode{ flex:0 1 auto; }
.loan-mode button{ padding:0 14px; }

/* Colonne de résultat collante sur grand écran */
@media (min-width:941px){
  .loan-calc .result-col{ position:sticky; top:calc(var(--nav-h) + 16px); }
}
.result-disclaimer{ margin-top:var(--sp-3); font-size:12.5px; color:var(--text-subtle); line-height:1.6; padding-inline:var(--sp-2); }

/* Groupes de paramètres */
.group + .group{ margin-top:var(--sp-6); padding-top:var(--sp-6); border-top:1px solid var(--border); }
.group-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-subtle); margin-bottom:var(--sp-5); }
.field-head .lbl{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--text-muted); }
.field-head label{ display:inline-flex; align-items:center; gap:7px; }
.field-hint-block{ margin:-8px 0 var(--sp-4); }
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-5); }
.field-pair .field-head{ flex-direction:column; align-items:stretch; }
.field-pair .field-input input{ width:100%; }
@media (max-width:520px){ .field-pair{ grid-template-columns:1fr; } .field-pair .field-head{ flex-direction:row; align-items:center; } .field-pair .field-input input{ width:96px; } }
.loan-params .field-input input{ width:112px; }
.field-input input::placeholder{ color:var(--text-subtle); font-weight:500; }

.advanced.sub{ margin-top:var(--sp-2); }
.advanced.sub summary{ min-height:50px; padding:0 var(--sp-4); font-size:14px; background:var(--surface-2); }
.advanced.sub .advanced-body{ background:var(--surface-2); padding:var(--sp-4); }
.advanced.sub .advanced-body > .field:last-child{ margin-bottom:0; }
.comp-presets{ margin:var(--sp-3) 0 var(--sp-4); }
.switch-row{ cursor:pointer; }
.switch-row.compact{ min-height:36px; gap:var(--sp-3); }
.params-foot{ margin-top:var(--sp-5); display:flex; justify-content:flex-end; }

[data-mode-hidden="true"], .is-hidden{ display:none !important; }

/* Résultat */
.result::before{ background:linear-gradient(90deg,var(--loan-cap),var(--loan-int),var(--loan-ass)); }
.split-bar .s-cap{ background:var(--loan-cap); }
.split-bar .s-int{ background:var(--loan-int); }
.split-bar .s-ass{ background:var(--loan-ass); }
.split-bar .s-frais{ background:var(--loan-frais); }
.split-4 .v{ font-size:16px; }
.result-value .cents{ font-size:.5em; color:var(--text-subtle); letter-spacing:-.02em; }

/* Jauge d'endettement */
.gauge{ margin-top:var(--sp-4); }
.gauge-track{ position:relative; height:10px; border-radius:var(--r-full); background:var(--surface-2); border:1px solid var(--border); }
.gauge-track i{ position:absolute; inset:0 auto 0 0; border-radius:var(--r-full); background:var(--brand); transition:width var(--dur-slow) var(--ease), background var(--dur) var(--ease); }
.gauge-track[data-level="warn"] i{ background:var(--warn); }
.gauge-track[data-level="bad"] i{ background:var(--danger); }
.gauge-mark{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--text-muted); border-radius:2px; }
.gauge-mark b{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--text-subtle); white-space:nowrap; font-family:var(--font-mono); }
.gauge{ padding-top:16px; }
.gauge-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-subtle); margin-top:4px; font-family:var(--font-mono); }

/* Vérifications */
.checks{ display:grid; gap:var(--sp-2); margin-top:var(--sp-5); }
.checks li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--text-muted); }
.checks li .ico{ margin-top:2px; }
.checks li strong{ color:var(--text); font-weight:600; }
.checks li[data-s="ok"] .ico{ color:var(--gain); }
.checks li[data-s="warn"] .ico{ color:var(--warn); }
.checks li[data-s="bad"] .ico{ color:var(--danger); }

/* Plan de financement */
.fin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:start; }
@media (max-width:860px){ .fin-grid{ grid-template-columns:1fr; } }
.fin-title{ font-size:17px; margin-bottom:var(--sp-4); }
.fin-list{ margin:0; display:grid; }
.fin-list .row{ display:flex; justify-content:space-between; gap:var(--sp-4); padding:10px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.fin-list .row:last-child{ border-bottom:none; }
.fin-list dt{ color:var(--text-muted); display:flex; align-items:center; gap:8px; min-width:0; }
.fin-list dd{ margin:0; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.fin-list .row.sub{ padding:5px 0 5px var(--sp-4); border-bottom:none; font-size:13px; }
.fin-list .row.sub dt, .fin-list .row.sub dd{ color:var(--text-subtle); font-weight:500; }
.fin-list .row.sub + .row:not(.sub){ border-top:1px solid var(--border); }
.fin-list .row.total{ border-top:1px solid var(--border-strong); border-bottom:none; margin-top:var(--sp-2); padding-top:var(--sp-3); font-size:16px; }
.fin-list .row.total dt{ color:var(--text); font-weight:600; }
.fin-list .dot{ width:10px; height:10px; border-radius:3px; flex:none; }
.fin-list .pct{ color:var(--text-subtle); font-weight:500; margin-left:8px; font-size:12.5px; }
.fin-bar{ display:flex; height:14px; border-radius:var(--r-full); overflow:hidden; margin-top:var(--sp-5); background:var(--surface-2); border:1px solid var(--border); }
.fin-bar i{ display:block; height:100%; transition:width var(--dur-slow) var(--ease); }

/* Tableaux */
.table-wrap td.neg{ color:var(--danger); }
.table-wrap tr.current td{ background:var(--brand-soft); }
.table-wrap tr.current td:first-child{ color:var(--brand); }
.table-wrap tr.ra-row td{ background:var(--warn-soft); }
#tableGran{ width:auto; }
#tableGran button{ padding:0 16px; }

/* Impression */
@media print{
  .loan-toolbar, .loan-params, .tabs, .result-actions, .gauge, #faq, .advanced{ display:none !important; }
  .calc{ grid-template-columns:1fr !important; }
  .tabpanel[hidden]{ display:block !important; }
  .table-wrap{ max-height:none; overflow:visible; }
  .section{ padding-block:24px; }
}

/* learn.css agrandit tous les h2 du bloc .hero : on garde un titre de carte sobre */
.hero .loan-params .card-title{ font-size:17px; }
.result-label{ flex-wrap:wrap; gap:0 6px; }
@media (max-width:520px){
  .result .split-legend.split-4, .result .result-meta{ grid-template-columns:1fr 1fr; }
}

/* Barre de résultat mobile : visible tant que la carte de résultat est hors écran */
.mobile-bar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:90;
  display:none; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:10px 10px 10px 18px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--shadow-lg);
}
.mobile-bar .k{ font-size:12px; color:var(--text-subtle); }
.mobile-bar .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:19px; font-weight:700; letter-spacing:-.03em; }
.mobile-bar .btn{ min-height:40px; padding:0 14px; }
@media (max-width:940px){
  .mobile-bar[data-on="true"]{ display:flex; }
}
@media print{ .mobile-bar{ display:none !important; } }