/* ─── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-600:  #2563EB;
  --blue-700:  #1D4ED8;
  --blue-50:   #EFF6FF;
  --blue-100:  #DBEAFE;
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-400:  #9CA3AF;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-900:  #111827;
  --green-50:  #F0FDF4;
  --green-600: #16A34A;
  --amber-50:  #FFFBEB;
  --amber-600: #D97706;
  --red-50:    #FEF2F2;
  --red-600:   #DC2626;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: var(--gray-100);
  color: var(--gray-900);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
}

/* ─── Header ────────────────────────────────────────────────────────────── */
.site-header {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gray-900);
  letter-spacing: -0.3px;
}
.header-tagline {
  font-size: .82rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ─── Main layout ───────────────────────────────────────────────────────── */
.main-layout {
  flex: 1;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(12px, 3vw, 28px) clamp(8px, 2vw, 24px) clamp(24px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.5vw, 28px);
  align-items: start;
  box-sizing: border-box;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(14px, 3vw, 28px);
}
.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 24px;
  letter-spacing: -0.2px;
}

/* ─── Form ──────────────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.01em;
}
.input-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  background: white;
}
.input-wrap:focus-within {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 11px 14px;
  font-family: var(--font);
  font-size: .95rem;
  color: var(--gray-900);
  background: transparent;
  min-width: 0;
}
.input-wrap input::placeholder { color: var(--gray-400); }
.unit {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--gray-50);
  border-left: 1.5px solid var(--gray-200);
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
}
/* Unit toggle (mois/ans) */
.unit-toggle {
  display: flex;
  border-left: 1.5px solid var(--gray-200);
}
.toggle-btn {
  padding: 0 12px;
  border: none;
  background: var(--gray-50);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.toggle-btn:first-child { border-right: 1px solid var(--gray-200); }
.toggle-btn.active {
  background: var(--blue-600);
  color: white;
}
.toggle-btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.field-hint {
  font-size: .78rem;
  color: var(--gray-400);
}
/* Input error state */
.field-group.error .input-wrap { border-color: var(--red-600); }
.field-group.error .input-wrap:focus-within { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* ─── Button ─────────────────────────────────────────────────────────────── */
.btn-calc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: var(--blue-600);
  color: white;
  font-family: var(--font);
  font-size: .97rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
  letter-spacing: 0.01em;
}
.btn-calc:hover  { background: var(--blue-700); box-shadow: 0 6px 16px rgba(37,99,235,.4); }
.btn-calc:active { transform: translateY(1px); box-shadow: none; }
.btn-calc:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }

/* ─── Button row (Calculer + Réinitialiser) ─────────────────────────────── */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.btn-row .btn-calc {
  flex: 1 1 clamp(180px, 50vw, 300px);
}
.btn-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 auto;
  padding: 14px 16px;
  background: white;
  color: var(--gray-600);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.btn-reset:hover  { border-color: var(--gray-400); color: var(--gray-900); background: var(--gray-50); }
.btn-reset:active { background: var(--gray-100); }
.btn-reset:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }

/* ─── Share button ───────────────────────────────────────────────────────── */
.btn-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 24px;
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  color: white;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(22,163,74,.35);
  letter-spacing: 0.01em;
}
.btn-share:hover  { opacity: .9; box-shadow: 0 6px 16px rgba(22,163,74,.4); }
.btn-share:active { transform: translateY(1px); box-shadow: none; }
.btn-share:focus-visible { outline: 3px solid #16A34A; outline-offset: 3px; }

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.alert-error   { background: var(--red-50);   color: var(--red-600);   border: 1px solid #FCA5A5; }
.alert-warning { background: var(--amber-50); color: var(--amber-600); border: 1px solid #FCD34D; }

/* ─── Results panel ──────────────────────────────────────────────────────── */
.results-panel { display: flex; flex-direction: column; gap: 20px; }
.results-title { margin-bottom: 0; }

/* ─── KPI grid ───────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.kpi-card {
  border-radius: var(--radius-md);
  padding: clamp(12px, 2.5vw, 20px) clamp(14px, 2.5vw, 22px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  box-shadow: var(--shadow-sm);
  animation: fadeSlideIn .35s ease both;
  min-width: 0;
}
.kpi-primary { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: white; }
.kpi-secondary { background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); color: white; }
.kpi-total { background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%); color: white; }

.kpi-icon {
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
  border-radius: clamp(8px, 2vw, 12px);
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon svg {
  width: clamp(16px, 3.5vw, 22px);
  height: clamp(16px, 3.5vw, 22px);
}
.kpi-content { display: flex; flex-direction: column; min-width: 0; }
.kpi-label {
  font-size: clamp(.68rem, 1.8vw, .78rem);
  font-weight: 600;
  opacity: .8;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kpi-value {
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.kpi-sub {
  font-size: clamp(.68rem, 1.8vw, .76rem);
  opacity: .75;
  margin-top: 2px;
}

/* nth-child animation delays */
.kpi-card:nth-child(2) { animation-delay: .07s; }
.kpi-card:nth-child(3) { animation-delay: .14s; }

/* ─── Detail card ────────────────────────────────────────────────────────── */
.detail-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.detail-list { display: flex; flex-direction: column; gap: 0; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 8px;
  flex-wrap: wrap;
}
.detail-row:last-child { border-bottom: none; }
.detail-row dt {
  font-size: .84rem;
  color: var(--gray-600);
  flex: 1 1 auto;
  min-width: 0;
}
.detail-row dd {
  font-size: .9rem;
  font-weight: 700;
  color: var(--gray-900);
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.detail-row--highlight dt { color: var(--blue-600); font-weight: 600; }
.detail-row--highlight dd { color: var(--blue-600); font-size: 1.02rem; }

/* ─── Chart card ──────────────────────────────────────────────────────────── */
.chart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 32px);
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#donutChart { max-width: clamp(130px, 30vw, 180px); }
.chart-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .86rem;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-item span { color: var(--gray-700); }
.legend-item strong { font-weight: 700; }
.chart-caption {
  text-align: center;
  font-size: .8rem;
  color: var(--gray-400);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 16px 20px;
  font-size: .78rem;
  color: var(--gray-400);
  border-top: 1px solid var(--gray-200);
  background: white;
}

/* ─── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.results-panel[hidden] { display: none; }
.results-panel:not([hidden]) { animation: fadeSlideIn .3s ease both; }

/* ─── Results actions (Partager + Exporter PDF) ─────────────────────────── */
.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.results-actions .btn-share { flex: 1 1 clamp(160px, 40vw, 300px); }
.btn-print {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  padding: 13px 18px;
  background: var(--gray-700);
  color: white;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn-print:hover  { opacity: .85; }
.btn-print:active { transform: translateY(1px); }
.btn-print:focus-visible { outline: 3px solid var(--gray-700); outline-offset: 3px; }

/* ─── Amortization table ─────────────────────────────────────────────────── */
.amort-card { padding-bottom: 20px; }
.amort-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.amort-header .detail-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.btn-csv {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--gray-50);
  color: var(--gray-700);
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.btn-csv:hover { border-color: var(--gray-400); background: var(--gray-100); }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}
.amort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(.72rem, 2vw, .82rem);
  min-width: 400px;
}
.amort-table thead th {
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 600;
  font-size: clamp(.65rem, 1.6vw, .73rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: clamp(5px, 1.2vw, 8px) clamp(6px, 1.5vw, 10px);
  text-align: right;
  white-space: nowrap;
  border-bottom: 2px solid var(--gray-200);
}
.amort-table thead th:first-child { text-align: center; }
.amort-table tbody td {
  padding: clamp(5px, 1vw, 7px) clamp(6px, 1.5vw, 10px);
  text-align: right;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}
.amort-table tbody td:first-child {
  text-align: center;
  color: var(--gray-400);
  font-size: .78rem;
  font-weight: 600;
}
.amort-table tbody tr:last-child td { border-bottom: none; }
.amort-table tbody tr:hover td { background: var(--gray-50); }
/* Collapsed: hide rows beyond 24 */
.amort-table tbody.amort-collapsed tr:nth-child(n + 25) { display: none; }
.btn-amort-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: none;
  border: 1.5px dashed var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-amort-toggle:hover { border-color: var(--gray-400); color: var(--gray-900); }

/* ─── Suivi — toggle bouton dans le formulaire ───────────────────────────── */
.suivi-toggle-row { margin-bottom: 16px; }
.btn-suivi-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-family: var(--font);
  font-size: .86rem;
  font-weight: 600;
  border: 1.5px dashed var(--blue-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
}
.btn-suivi-toggle:hover { background: var(--blue-100); }
.btn-suivi-toggle:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.suivi-chevron { margin-left: auto; font-size: .9rem; }
.suivi-section {
  padding: 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

/* ─── Suivi — panneau résultats ──────────────────────────────────────────── */
.suivi-card { border-left: 4px solid var(--blue-600); }
.suivi-progress-wrap { margin-bottom: 20px; }
.suivi-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.suivi-label { font-size: clamp(.76rem, 2vw, .84rem); color: var(--gray-600); flex: 1; min-width: 0; }
.suivi-pct-badge {
  font-size: .92rem;
  font-weight: 800;
  color: var(--blue-600);
  white-space: nowrap;
}
.progress-bar {
  height: 10px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-600) 0%, var(--blue-600) 100%);
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.suivi-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 8px;
}
.suivi-kpi {
  padding: clamp(8px, 1.5vw, 12px);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.suivi-kpi-done { background: var(--green-50); border: 1px solid #BBF7D0; }
.suivi-kpi-rem  { background: var(--blue-50);  border: 1px solid var(--blue-100); }
.suivi-kpi-label {
  font-size: clamp(.6rem, 1.6vw, .7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.suivi-kpi-done .suivi-kpi-label { color: var(--green-600); }
.suivi-kpi-rem  .suivi-kpi-label { color: var(--blue-600); }
.suivi-kpi-value {
  font-size: clamp(.76rem, 2vw, .88rem);
  font-weight: 700;
  color: var(--gray-900);
  overflow-wrap: break-word;
}

/* ─── Tableau d'amortissement : surbrillance suivi ───────────────────────── */
.amort-table .col-date { display: none; }
.amort-table.suivi-active .col-date {
  display: table-cell;
  text-align: center;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--gray-600);
}
.amort-table thead th.col-date { text-align: center; }

/* Lignes payées */
.amort-row-paid td {
  background: var(--green-50) !important;
  color: var(--gray-400) !important;
}
.amort-row-paid td:first-child { color: var(--green-600) !important; }

/* Ligne courante (prochain prélèvement) */
.amort-row-current td {
  background: var(--blue-50) !important;
  border-top: 2px solid var(--blue-600) !important;
  border-bottom: 2px solid var(--blue-600) !important;
  color: var(--gray-900) !important;
  font-weight: 600;
}
.amort-row-current td:first-child { color: var(--blue-600) !important; }
.amort-current-badge {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  color: var(--blue-600);
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: .02em;
}

/* ─── Dark mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --gray-50:   #1F2937;
    --gray-100:  #111827;
    --gray-200:  #374151;
    --gray-400:  #9CA3AF;
    --gray-600:  #D1D5DB;
    --gray-700:  #E5E7EB;
    --gray-900:  #F9FAFB;
    --blue-50:   #1e3165;
    --blue-100:  #1e3a8a;
    --green-50:  #052e16;
    --amber-50:  #451a03;
    --red-50:    #3b0c0c;
    --red-600:   #F87171;
    --amber-600: #FCD34D;
    --green-600: #4ADE80;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  }
  body { background: #0F172A; }
  .site-header { background: #1E293B; border-bottom-color: #334155; }
  .card { background: #1E293B; }
  .site-footer { background: #1E293B; border-top-color: #334155; }
  .input-wrap { background: #0F172A; border-color: #334155; }
  .input-wrap input { color: #F1F5F9; }
  .input-wrap input::placeholder { color: #64748B; }
  .unit { background: #1E293B; border-left-color: #334155; color: #94A3B8; }
  .unit-toggle { border-left-color: #334155; }
  .toggle-btn { background: #1E293B; color: #CBD5E1; }
  .toggle-btn:first-child { border-right-color: #334155; }
  .detail-title { border-bottom-color: #334155; }
  .detail-row { border-bottom-color: #1E293B; }
  .btn-reset { background: #1E293B; border-color: #334155; color: #CBD5E1; }
  .btn-reset:hover { background: #334155; border-color: #64748B; color: #F1F5F9; }
  .btn-print { background: #475569; }
  .btn-csv { background: #1E293B; color: #CBD5E1; border-color: #334155; }
  .btn-csv:hover { background: #334155; border-color: #64748B; }
  .amort-header { border-bottom-color: #334155; }
  .amort-table thead th { background: #0F172A; color: #94A3B8; border-bottom-color: #334155; }
  .amort-table tbody td { border-bottom-color: #1E293B; color: #CBD5E1; }
  .amort-table tbody td:first-child { color: #64748B; }
  .amort-table tbody tr:hover td { background: #0F172A; }
  .btn-amort-toggle { border-color: #334155; color: #94A3B8; }
  .btn-amort-toggle:hover { border-color: #64748B; color: #F1F5F9; }
  /* Suivi */
  .btn-suivi-toggle { background: #1e3165; border-color: #3B82F6; color: #93C5FD; }
  .btn-suivi-toggle:hover { background: #1e3a8a; }
  .suivi-section { background: #1e3165; border-color: #1e3a8a; }
  .progress-bar { background: #334155; }
  .suivi-kpi-done { background: #052e16; border-color: #166534; }
  .suivi-kpi-rem  { background: #1e3165; border-color: #1e3a8a; }
  .suivi-kpi-done .suivi-kpi-label { color: #4ADE80; }
  .suivi-kpi-rem  .suivi-kpi-label { color: #93C5FD; }
  /* Lignes tableau suivi */
  .amort-row-paid td { background: #052e16 !important; color: #4B5563 !important; }
  .amort-row-paid td:first-child { color: #4ADE80 !important; }
  .amort-row-current td { background: #1e3165 !important; color: #F1F5F9 !important; }
  .amort-current-badge { color: #93C5FD; }
  .amort-table.suivi-active .col-date { color: #94A3B8; }
}

/* ─── Print / Export PDF ─────────────────────────────────────────────────── */
@media print {
  @page { margin: 1.5cm; size: A4 portrait; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  .form-card,
  .results-actions,
  .btn-amort-toggle,
  .site-footer { display: none !important; }

  .site-header { position: static; box-shadow: none; border-bottom: 2px solid #2563EB; }
  .main-layout { grid-template-columns: 1fr; padding: 0; gap: 16px; }
  .card { box-shadow: none; border: 1px solid #E5E7EB; break-inside: avoid; }
  .amort-card { break-before: page; }
  .results-panel { display: block !important; }
  /* Show all amortization rows when printing */
  .amort-table tbody.amort-collapsed tr { display: table-row !important; }
  .table-scroll { overflow: visible; }
  .amort-table { min-width: unset; font-size: .75rem; }
  .kpi-value { font-size: 1.2rem !important; }
}

/* ─── Responsive — Tablet (≥ 32.5em / ~520px) ─────────────────────────── */
@media (min-width: 32.5em) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid  { grid-template-columns: 1fr 1fr; }
  .kpi-total { grid-column: span 2; }
  .kpi-value { font-size: 1.55rem; }
}

/* ─── Responsive — Desktop (≥ 48em / ~768px) ──────────────────────────── */
@media (min-width: 48em) {
  .main-layout {
    grid-template-columns: minmax(340px, 420px) 1fr;
  }
  .form-card { position: sticky; top: 84px; }
  .kpi-grid  { grid-template-columns: 1fr 1fr 1fr; }
  .kpi-total { grid-column: span 1; }
  .kpi-value { font-size: 1.65rem; }
}

/* ─── Responsive — Large desktop (≥ 64em / ~1024px) ───────────────────── */
@media (min-width: 64em) {
  .main-layout { grid-template-columns: 460px 1fr; }
}