/* /outils/assets/rachat-credit/rachat-credit.css */

:root{
  --cms-dark: #0b1220;
  --rc-accent: var(--accent, #0e9f9a);
  --rc-text: rgba(15, 20, 28, .92);
  --rc-muted: rgba(15, 20, 28, .68);
  --rc-card: rgba(255,255,255,.88);
  --rc-glass: rgba(255,255,255,.78);
  --rc-shadow: 0 10px 30px rgba(0,0,0,.08);
  --rc-green: #0f9f4f;
  --rc-redbg: rgba(231, 76, 60, .08);
  --rc-greenbg: rgba(15, 159, 79, .10);
}

.muted{opacity:.72}
.small{font-size:.92rem}
.accent{color: var(--rc-accent)}
.divider{height:1px;background:rgba(0,0,0,.08);margin:18px 0}
.empty{text-align:center !important; padding:18px; color: var(--rc-muted);}

/* Head contrast */
.tool-head{color: rgba(255,255,255,.92)}
.tool-head h1{
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 18px rgba(14,159,154,.20);
  margin:10px 0 6px;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}
.tool-head p{margin:0; color: rgba(255,255,255,.72)}
.tool-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(14,159,154,.16);
  border:1px solid rgba(14,159,154,.28);
  color: rgba(255,255,255,.88);
  font-weight:1000; font-size:.85rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.tool-head h1::after{
  content:"";
  display:block;
  width: 110px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(14,159,154,.9);
  box-shadow: 0 8px 18px rgba(14,159,154,.20);
  opacity: .95;
}

/* Ads */
.ad{border:1px dashed rgba(0,0,0,.16); border-radius:16px; background: rgba(255,255,255,.65)}
.ad-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;height:100%}
.ad-title{font-size:.72rem;letter-spacing:.12em;font-weight:1000;opacity:.65}
.ad-size{font-size:1.05rem;font-weight:1000;margin-top:6px}
.ad-sub{font-size:.86rem;opacity:.55;margin-top:3px}
.ad-top{height:100px;margin:14px 0 18px}
.ad-left{width:180px; min-height:600px; position:sticky; top:16px}

/* Layout */
.tool-grid{display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; align-items:start}
.tool-main{min-width:0}

/* Cards */
.card{
  background: var(--rc-card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: var(--rc-shadow);
  padding: 16px;
  color: var(--rc-text);
}
.glass{background: var(--rc-glass); backdrop-filter: blur(10px)}
.section-card{margin-bottom:16px}

.section-head{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.section-head h2{margin:0; font-size:1.2rem}
.section-head p{margin:4px 0 0; color: var(--rc-muted)}
.step{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  font-weight:1100;
  flex:0 0 auto;
}
.step-1{background: rgba(231,76,60,.12); border:1px solid rgba(231,76,60,.20)}
.step-2{background: rgba(15,159,79,.12); border:1px solid rgba(15,159,79,.22)}
.step-3{background: rgba(60,120,255,.12); border:1px solid rgba(60,120,255,.22)}

/* Loan rows */
.loans-wrap{display:grid; gap:12px}
.loan{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background: rgba(255,255,255,.74);
  padding:12px;
}
.loan-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.loan-title{font-weight:1100}
.loan-actions{display:flex; gap:8px; align-items:center}
.icon-btn{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
}
.icon-btn:hover{transform: translateY(-1px)}
.icon-btn:active{transform: translateY(0)}

.loan-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.field{min-width:0}
label{
  display:block;
  font-weight:1000;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  opacity:.86;
  margin-bottom:6px;
}
input[type="text"], input[type="number"]{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:11px 12px;
  background: rgba(255,255,255,.92);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus{
  border-color: rgba(14,159,154,.55);
  box-shadow: 0 0 0 4px rgba(14,159,154,.12);
}
.hint{margin-top:6px; font-size:.85rem; color: var(--rc-muted)}
.range{width:100%; accent-color: var(--rc-accent)}

/* Add loan */
.btn-add{
  margin-top:12px;
  width:100%;
  border:1px dashed rgba(0,0,0,.18);
  background: rgba(0,0,0,.02);
  border-radius:16px;
  padding:12px;
  font-weight:1100;
  cursor:pointer;
}
.btn-add:hover{background: rgba(0,0,0,.03)}

/* Mini KPIs */
.mini-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.mini-kpi{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 12px;
  background: rgba(255,255,255,.72);
}
.mini-val{font-size:1.1rem; font-weight:1100; margin-top:2px}

/* Form grid */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.field-wide{grid-column: 1 / -1}
.rate-row{display:flex; gap:10px; align-items:center}
.rate-pill{width:110px}

/* Buttons */
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.actions-right{margin-left:auto}
.btn-primary, .btn-outline, .btn-ghost{
  border-radius:14px;
  padding:12px 14px;
  font-weight:1100;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary.cms{
  background: var(--cms-dark);
  color:#fff;
  box-shadow: 0 10px 20px rgba(11,18,32,.25);
}
.btn-outline{
  background: rgba(255,255,255,.80);
  border-color: rgba(0,0,0,.12);
}
.btn-ghost{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}
.btn-primary:disabled, .btn-outline:disabled, .btn-ghost:disabled{opacity:.55; cursor:not-allowed}
.full{width:100%; margin-top:10px}

/* Compare */
.compare-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.compare-box{
  border-radius:16px;
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.74);
}
.compare-box.bad{background: var(--rc-redbg); border-color: rgba(231,76,60,.18)}
.compare-box.good{background: var(--rc-greenbg); border-color: rgba(15,159,79,.24)}
.compare-title{font-weight:1100; margin-bottom:10px}
.line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0}
.line span{color: var(--rc-muted)}
.line strong{font-weight:1100}

.mega-bar{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  background: rgba(11,18,32,.08);
  border:1px solid rgba(11,18,32,.12);
}
.mega-item{padding:14px; text-align:center}
.mega-label{font-size:.9rem; color: var(--rc-muted)}
.mega-val{font-size:1.45rem; font-weight:1200; margin-top:6px}

.cta-cms{
  width:100%;
  margin-top:10px;
  border:none;
  border-radius:14px;
  padding:14px 16px;
  background: var(--rc-accent);
  color:#fff;
  font-weight:1200;
  cursor:pointer;
  box-shadow: 0 12px 24px rgba(14,159,154,.18);
}

/* Tables (better contrast) */
.table-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.98);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width: 860px;
  color: rgba(10, 14, 20, .92);
}
.compare-table th, .compare-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  text-align:right;
  white-space:nowrap;
}
.compare-table th:first-child, .compare-table td:first-child{text-align:left}
.compare-table thead th{
  position: sticky; top:0;
  background: rgba(245,248,252,.98);
  z-index:1;
  font-weight:1200;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: rgba(10, 14, 20, .78);
}
.compare-table tbody tr:hover td{background: rgba(11,18,32,.03)}

/* MODAL */
.rc-modal{position:fixed; inset:0; z-index:9999; display:none}
.rc-modal.is-open{display:block}
.rc-modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px)}
.rc-modal__dialog{
  position:relative;
  width: min(1080px, calc(100vw - 28px));
  height: min(86vh, 860px);
  margin: 7vh auto;
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.35);
  display:flex;
  flex-direction:column;
}
.rc-modal__header{
  background: var(--cms-dark);
  color:#fff;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.rc-modal__header h3{margin:0; font-size:1.1rem; font-weight:1200}
.rc-modal__close{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size:1.35rem;
  cursor:pointer;
  line-height:1;
}
.rc-modal__close:hover{background: rgba(255,255,255,.16)}
.rc-modal__body{
  padding: 16px;
  overflow:auto;
  background: rgba(245,247,250,.98);
}
.rc-modal__footer{
  padding: 14px 16px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.modal-h{display:flex;align-items:center;gap:10px;font-weight:1200;margin:4px 0 10px;color: rgba(10,14,20,.92)}
.modal-ico{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(11,18,32,.06);
}
.modal-table .compare-table{min-width: 920px}

.modal-synth{
  border:1px solid rgba(11,18,32,.12);
  background: rgba(11,18,32,.06);
  border-radius: 16px;
  padding: 12px;
}
.synth-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top: 10px;
}
.synth-item{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px 12px;
}
.synth-k{font-size:.9rem; color: var(--rc-muted)}
.synth-v{font-size:1.1rem; font-weight:1200; margin-top:4px; color: rgba(10,14,20,.92)}
.synth-tag{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 1200;
}
.synth-tag.ok{background: rgba(15,159,79,.12); border:1px solid rgba(15,159,79,.20); color:#0a7a3b}
.synth-tag.ko{background: rgba(231,76,60,.10); border:1px solid rgba(231,76,60,.18); color:#a62c22}

body.modal-lock{overflow:hidden}

/* Responsive */
@media (max-width: 980px){
  .tool-grid{grid-template-columns:1fr}
  .ad-left{position:static; width:100%; min-height:120px}
  .loan-grid{grid-template-columns: 1fr 1fr}
  .mini-kpis{grid-template-columns: 1fr}
  .synth-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .mega-bar{grid-template-columns:1fr}
  .loan-grid{grid-template-columns:1fr}
  .rate-row{flex-direction:column; align-items:stretch}
  .rate-pill{width:100%}
  .actions-right{margin-left:0; width:100%}
  #btnPdf{width:100%}
}
/* Mini helper durée (mois -> années) */
.months-helper{
  margin-top: 6px;
  font-size: .86rem;
  color: rgba(15, 20, 28, .62);
}
.months-helper strong{
  color: rgba(15, 20, 28, .82);
  font-weight: 1100;
}