:root{
  --rc-red:#ff2b2b;
  --rc-red-dark:#e31b1b;

  --rc-bg:#f5f6f8;
  --rc-card:#ffffff;
  --rc-card-2:#fbfbfc;
  --rc-text:#121212;
  --rc-muted:#6b7280;
  --rc-border:#e5e7eb;
  --rc-shadow:0 10px 28px rgba(0,0,0,.05);

  --rc-dark-bg:#0f1115;
  --rc-dark-card:#171a21;
  --rc-dark-card-2:#1d212b;
  --rc-dark-text:#f3f4f6;
  --rc-dark-muted:#a3adbc;
  --rc-dark-border:#2b3140;
  --rc-dark-shadow:0 12px 32px rgba(0,0,0,.28);

  --rc-radius-xl:24px;
  --rc-radius-lg:20px;
  --rc-radius-md:16px;
  --rc-radius-sm:14px;
}

.muted{opacity:.72}
.empty{text-align:center !important;padding:18px;color:var(--rc-muted)}

/* =========================
   PAGE
========================= */
.content-area .rc-page-card{
  display:flex;
  flex-direction:column;
  gap:18px; /* espace global entre hero / pub / bloc 1 / bloc 2 / bloc 3 */
}

/* =========================
   HERO
========================= */
.rc-hero{
  background:var(--rc-card);
  border:1px solid var(--rc-border);
  border-radius:28px;
  padding:22px 24px;
  box-shadow:var(--rc-shadow);
}

.rc-hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,43,43,.10);
  color:var(--rc-red-dark);
  font-size:.82rem;
  font-weight:800;
  margin-bottom:12px;
}

.rc-page-title{
  margin:0 0 8px;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.05;
  color:var(--rc-text);
  font-weight:900;
  letter-spacing:-.03em;
}

.rc-page-title span{
  color:var(--rc-red);
}

.rc-page-subtitle{
  margin:0;
  color:#667085;
  font-size:1.02rem;
}

/* =========================
   PUB TOP
========================= */
.rc-top-ad{
  background:var(--rc-card-2);
  border:1px dashed #d7dbe2;
  border-radius:22px;
}

.rc-top-ad-inner{
  min-height:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 18px;
}

.rc-top-ad-title{
  font-size:.74rem;
  letter-spacing:.14em;
  font-weight:800;
  color:#8b8f97;
}

.rc-top-ad-size{
  margin-top:8px;
  font-size:2rem;
  font-weight:900;
  color:#101114;
}

.rc-top-ad-sub{
  margin-top:6px;
  color:#747b87;
}

/* =========================
   BLOCS 1 / 2 / 3
========================= */
.rc-section-card{
  background:var(--rc-card);
  border:1px solid var(--rc-border);
  border-radius:26px;
  padding:18px 18px 16px;
  box-shadow:var(--rc-shadow);
}

.rc-divider{
  height:1px;
  background:var(--rc-border);
  margin:18px 0;
}

.rc-section-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:18px; /* important pour l'air du bloc */
}

.rc-section-head h2{
  margin:0;
  color:var(--rc-text);
  font-size:1.1rem;
  font-weight:850;
  letter-spacing:-.02em;
}

.rc-section-head p{
  margin:5px 0 0;
  color:var(--rc-muted);
  font-size:.98rem;
}

.rc-step{
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:.95rem;
  flex:0 0 auto;
  border:1px solid transparent;
}

.rc-step-1,
.rc-step-2,
.rc-step-3{
  background:rgba(255,43,43,.08);
  color:var(--rc-red-dark);
  border-color:rgba(255,43,43,.14);
}

/* =========================
   FORM / CHAMPS
========================= */
.loans-wrap{
  display:grid;
  gap:12px;
}

.loan{
  border:1px solid var(--rc-border);
  border-radius:18px;
  background:#fff;
  padding:14px;
}

.loan-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.loan-title{
  font-weight:800;
  color:var(--rc-text);
}

.loan-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.icon-btn{
  border:1px solid var(--rc-border);
  background:#fff;
  color:var(--rc-text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  transition:.15s ease;
}

.icon-btn:hover{
  background:#fafafa;
  border-color:#d7dbe2;
}

.loan-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.field{min-width:0}

label{
  display:block;
  margin-bottom:6px;
  font-size:.80rem;
  text-transform:uppercase;
  font-weight:800;
  color:#2f3440;
  letter-spacing:.02em;
}

input[type="text"],
input[type="number"]{
  width:100%;
  border:1px solid #d9dee7;
  border-radius:14px;
  padding:12px 13px;
  background:#fff;
  outline:none;
  color:#111827;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus{
  border-color:rgba(255,43,43,.42);
  box-shadow:0 0 0 4px rgba(255,43,43,.08);
}

.hint{
  margin-top:6px;
  font-size:.88rem;
  color:var(--rc-muted);
}

.range{
  width:100%;
  accent-color:var(--rc-red);
}

.months-helper{
  margin-top:6px;
  font-size:.86rem;
  color:#7a818d;
}

.months-helper strong{
  color:#1f2937;
  font-weight:800;
}

/* =========================
   AJOUT CREDIT
========================= */
.btn-add{
  margin-top:12px;
  width:100%;
  border:1px dashed #d7dbe2;
  background:#fafbfc;
  color:var(--rc-text);
  border-radius:18px;
  padding:14px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}

.btn-add:hover{
  background:#f4f6f8;
}

/* =========================
   MINI KPI
========================= */
.mini-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.mini-kpi{
  border:1px solid var(--rc-border);
  border-radius:18px;
  padding:14px;
  background:#fff;
}

.mini-label{
  color:var(--rc-muted);
  font-size:.92rem;
}

.mini-val{
  margin-top:5px;
  font-size:1.45rem;
  font-weight:900;
  color:var(--rc-text);
}

/* =========================
   GRID FORM
========================= */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 14px;
}

.field-wide{
  grid-column:1 / -1;
}

.rate-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.rate-pill{
  width:120px;
}

/* =========================
   BOUTONS
========================= */
.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:2px;
}

.actions-right{
  margin-left:auto;
}

.btn-primary,
.btn-outline,
.btn-ghost{
  border-radius:14px;
  padding:12px 16px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
}

.btn-primary{
  background:var(--rc-red);
  color:#fff;
  box-shadow:0 10px 24px rgba(255,43,43,.18);
}

.btn-primary:hover{
  background:var(--rc-red-dark);
}

.btn-outline{
  background:#111114;
  color:#fff;
  border-color:#111114;
}

.btn-outline:hover{
  background:#000;
}

.btn-ghost{
  background:#f7f7f8;
  color:#151518;
  border-color:var(--rc-border);
}

.btn-ghost:hover{
  background:#eef1f4;
}

.btn-primary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.full{
  width:100%;
  margin-top:14px;
}

/* =========================
   COMPARAISON
========================= */
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:4px;
}

.compare-box{
  border-radius:20px;
  padding:16px;
  border:1px solid var(--rc-border);
  background:#fff;
}

.compare-box.bad{
  background:#fff7f7;
  border-color:#ffd8d8;
}

.compare-box.good{
  background:#fafbfc;
  border-color:#e6e9ef;
}

.compare-title{
  font-weight:850;
  font-size:1.05rem;
  color:var(--rc-text);
  margin-bottom:10px;
}

.line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 0;
}

.line span{
  color:var(--rc-muted);
}

.line strong{
  color:var(--rc-text);
  font-weight:850;
}

.mega-bar{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #16181d;
  background:#121317;
}

.mega-item{
  padding:18px 14px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.08);
}

.mega-item:last-child{
  border-right:none;
}

.mega-label{
  font-size:.92rem;
  color:rgba(255,255,255,.72);
}

.mega-val{
  margin-top:7px;
  font-size:1.45rem;
  font-weight:900;
  color:#fff;
}

.cta-cms{
  width:100%;
  margin-top:14px;
  border:none;
  border-radius:16px;
  padding:15px 18px;
  background:var(--rc-red);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(255,43,43,.20);
  transition:.15s ease;
}

.cta-cms:hover{
  background:var(--rc-red-dark);
}

.footnote{
  margin-top:12px;
  color:var(--rc-muted);
  font-size:.9rem;
}

/* =========================
   TABLES
========================= */
.table-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--rc-border);
  background:#fff;
}

.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
}

.compare-table th,
.compare-table td{
  padding:11px 12px;
  border-bottom:1px solid #edf0f4;
  text-align:right;
  white-space:nowrap;
  color:var(--rc-text);
}

.compare-table th:first-child,
.compare-table td:first-child{
  text-align:left;
}

.compare-table thead th{
  position:sticky;
  top:0;
  background:#f8f9fb;
  z-index:1;
  font-size:.82rem;
  text-transform:uppercase;
  font-weight:900;
  color:#606776;
  letter-spacing:.05em;
}

.compare-table tbody tr:hover td{
  background:#fafbfd;
}

/* =========================
   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,.58);
}

.rc-modal__dialog{
  position:relative;
  width:min(1080px,calc(100vw - 28px));
  height:min(86vh,860px);
  margin:7vh auto;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
}

.rc-modal__header{
  background:#111114;
  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:850;
}

.rc-modal__close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.35rem;
  cursor:pointer;
  line-height:1;
}

.rc-modal__body{
  padding:16px;
  overflow:auto;
  background:#f7f8fa;
}

.rc-modal__footer{
  padding:14px 16px;
  background:#fff;
  border-top:1px solid var(--rc-border);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.modal-h{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:850;
  margin:4px 0 10px;
  color:var(--rc-text);
}

.modal-ico{
  width:28px;
  height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(255,43,43,.10);
  color:var(--rc-red-dark);
  font-weight:800;
}

.modal-table .compare-table{
  min-width:920px;
}

.modal-synth{
  border:1px solid var(--rc-border);
  background:#fff;
  border-radius:18px;
  padding:12px;
}

.synth-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}

.synth-item{
  border:1px solid var(--rc-border);
  background:#fff;
  border-radius:14px;
  padding:12px;
}

.synth-k{
  font-size:.92rem;
  color:var(--rc-muted);
}

.synth-v{
  font-size:1.1rem;
  font-weight:850;
  margin-top:4px;
  color:var(--rc-text);
}

.synth-tag{
  margin-top:10px;
  border-radius:14px;
  padding:10px 12px;
  font-weight:850;
}

.synth-tag.ok{
  background:#ebfff2;
  border:1px solid #c8f0d8;
  color:#16733c;
}

.synth-tag.ko{
  background:#fff1f1;
  border:1px solid #ffd4d4;
  color:#b42318;
}

body.modal-lock{
  overflow:hidden;
}

/* =========================
   DARK MODE
   adapte selon ton site :
   body.dark, body.dark-mode ou [data-theme="dark"]
========================= */
body.dark .rc-hero,
body.dark-mode .rc-hero,
[data-theme="dark"] .rc-hero{
  background:var(--rc-dark-card);
  border-color:var(--rc-dark-border);
  box-shadow:var(--rc-dark-shadow);
}

body.dark .rc-page-title,
body.dark-mode .rc-page-title,
[data-theme="dark"] .rc-page-title{
  color:var(--rc-dark-text);
}

body.dark .rc-page-subtitle,
body.dark-mode .rc-page-subtitle,
[data-theme="dark"] .rc-page-subtitle{
  color:var(--rc-dark-muted);
}

body.dark .rc-top-ad,
body.dark-mode .rc-top-ad,
[data-theme="dark"] .rc-top-ad{
  background:var(--rc-dark-card);
  border-color:#394151;
}

body.dark .rc-top-ad-title,
body.dark-mode .rc-top-ad-title,
[data-theme="dark"] .rc-top-ad-title{
  color:#98a2b3;
}

body.dark .rc-top-ad-size,
body.dark-mode .rc-top-ad-size,
[data-theme="dark"] .rc-top-ad-size{
  color:#f5f7fa;
}

body.dark .rc-top-ad-sub,
body.dark-mode .rc-top-ad-sub,
[data-theme="dark"] .rc-top-ad-sub{
  color:#aab3c2;
}

body.dark .rc-section-card,
body.dark-mode .rc-section-card,
[data-theme="dark"] .rc-section-card{
  background:var(--rc-dark-card);
  border-color:var(--rc-dark-border);
  box-shadow:var(--rc-dark-shadow);
}

body.dark .rc-divider,
body.dark-mode .rc-divider,
[data-theme="dark"] .rc-divider{
  background:var(--rc-dark-border);
}

body.dark .rc-section-head h2,
body.dark-mode .rc-section-head h2,
[data-theme="dark"] .rc-section-head h2{
  color:var(--rc-dark-text);
}

body.dark .rc-section-head p,
body.dark-mode .rc-section-head p,
[data-theme="dark"] .rc-section-head p{
  color:var(--rc-dark-muted);
}

body.dark .loan,
body.dark-mode .loan,
[data-theme="dark"] .loan,
body.dark .mini-kpi,
body.dark-mode .mini-kpi,
[data-theme="dark"] .mini-kpi,
body.dark .compare-box,
body.dark-mode .compare-box,
[data-theme="dark"] .compare-box,
body.dark .modal-synth,
body.dark-mode .modal-synth,
[data-theme="dark"] .modal-synth,
body.dark .synth-item,
body.dark-mode .synth-item,
[data-theme="dark"] .synth-item,
body.dark .table-wrap,
body.dark-mode .table-wrap,
[data-theme="dark"] .table-wrap{
  background:var(--rc-dark-card-2);
  border-color:var(--rc-dark-border);
}

body.dark .compare-box.good,
body.dark-mode .compare-box.good,
[data-theme="dark"] .compare-box.good{
  background:#1a1f29;
}

body.dark .compare-box.bad,
body.dark-mode .compare-box.bad,
[data-theme="dark"] .compare-box.bad{
  background:#2a1a1d;
  border-color:#553037;
}

body.dark .loan-title,
body.dark-mode .loan-title,
[data-theme="dark"] .loan-title,
body.dark .mini-val,
body.dark-mode .mini-val,
[data-theme="dark"] .mini-val,
body.dark .compare-title,
body.dark-mode .compare-title,
[data-theme="dark"] .compare-title,
body.dark .line strong,
body.dark-mode .line strong,
[data-theme="dark"] .line strong,
body.dark .modal-h,
body.dark-mode .modal-h,
[data-theme="dark"] .modal-h,
body.dark .synth-v,
body.dark-mode .synth-v,
[data-theme="dark"] .synth-v{
  color:var(--rc-dark-text);
}

body.dark .mini-label,
body.dark-mode .mini-label,
[data-theme="dark"] .mini-label,
body.dark .line span,
body.dark-mode .line span,
[data-theme="dark"] .line span,
body.dark .hint,
body.dark-mode .hint,
[data-theme="dark"] .hint,
body.dark .footnote,
body.dark-mode .footnote,
[data-theme="dark"] .footnote,
body.dark .months-helper,
body.dark-mode .months-helper,
[data-theme="dark"] .months-helper,
body.dark .synth-k,
body.dark-mode .synth-k,
[data-theme="dark"] .synth-k{
  color:var(--rc-dark-muted);
}

body.dark .months-helper strong,
body.dark-mode .months-helper strong,
[data-theme="dark"] .months-helper strong{
  color:#f4f6f9;
}

body.dark label,
body.dark-mode label,
[data-theme="dark"] label{
  color:#d8dee8;
}

body.dark input[type="text"],
body.dark input[type="number"],
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"]{
  background:#11151c;
  border-color:#394150;
  color:#f3f4f6;
}

body.dark .btn-add,
body.dark-mode .btn-add,
[data-theme="dark"] .btn-add{
  background:#141922;
  border-color:#394150;
  color:var(--rc-dark-text);
}

body.dark .btn-add:hover,
body.dark-mode .btn-add:hover,
[data-theme="dark"] .btn-add:hover{
  background:#171d27;
}

body.dark .icon-btn,
body.dark-mode .icon-btn,
[data-theme="dark"] .icon-btn{
  background:#141922;
  border-color:#394150;
  color:var(--rc-dark-text);
}

body.dark .btn-ghost,
body.dark-mode .btn-ghost,
[data-theme="dark"] .btn-ghost{
  background:#161b23;
  border-color:#394150;
  color:#f3f4f6;
}

body.dark .btn-ghost:hover,
body.dark-mode .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:hover{
  background:#1a202a;
}

body.dark .rc-modal__dialog,
body.dark-mode .rc-modal__dialog,
[data-theme="dark"] .rc-modal__dialog{
  background:var(--rc-dark-card);
}

body.dark .rc-modal__body,
body.dark-mode .rc-modal__body,
[data-theme="dark"] .rc-modal__body{
  background:#12161d;
}

body.dark .rc-modal__footer,
body.dark-mode .rc-modal__footer,
[data-theme="dark"] .rc-modal__footer{
  background:var(--rc-dark-card);
  border-top-color:var(--rc-dark-border);
}

body.dark .compare-table th,
body.dark .compare-table td,
body.dark-mode .compare-table th,
body.dark-mode .compare-table td,
[data-theme="dark"] .compare-table th,
[data-theme="dark"] .compare-table td{
  color:#edf2f7;
  border-bottom-color:#2f3744;
}

body.dark .compare-table thead th,
body.dark-mode .compare-table thead th,
[data-theme="dark"] .compare-table thead th{
  background:#161c24;
  color:#b7c0cf;
}

body.dark .compare-table tbody tr:hover td,
body.dark-mode .compare-table tbody tr:hover td,
[data-theme="dark"] .compare-table tbody tr:hover td{
  background:#1b212b;
}

/* Rentabilité dans la barre de synthèse */
#s_tag.is-ok{
  color: #22c55e;
}

#s_tag.is-ko{
  color: #ff4d4f;
}

#s_tag.is-ok,
#s_tag.is-ko{
  font-weight: 900;
  letter-spacing: -.01em;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .loan-grid{
    grid-template-columns:1fr 1fr;
  }

  .mini-kpis,
  .synth-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .content-area .rc-page-card{
    gap:16px;
  }

  .rc-hero{
    padding:20px 18px;
  }

  .rc-section-card{
    padding:16px;
  }

  .rc-section-head{
    margin-bottom:16px;
  }

  .form-grid,
  .compare-grid,
  .loan-grid,
  .mega-bar{
    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%;
  }

  .rc-page-title{
    font-size:2.15rem;
  }

  .rc-top-ad-inner{
    min-height:92px;
  }

  .rc-top-ad-size{
    font-size:1.65rem;
  }
}