.blot-chrcalc-front { margin-top: 12px; }
.blot-chrcalc-card { border: 1px solid #e5e5e5; border-radius: 10px; padding: 14px; background: #fff; }
.blot-chrcalc-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom: 10px; }
.blot-chrcalc-title { font-weight: 700; font-size: 16px; }
.blot-chrcalc-subtitle { font-size: 13px; color: #666; }
.blot-chrcalc-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.blot-chrcalc-grid label { display:block; }
.blot-chrcalc-grid label span { display:block; font-size: 12px; color:#444; margin-bottom: 4px; }
.blot-chrcalc-grid input, .blot-chrcalc-grid select { width:100%; padding: 8px 10px; border:1px solid #ddd; border-radius: 8px; }
.blot-chrcalc-wide { grid-column: 1 / -1; }
.blot-chrcalc-actions { margin-top: 10px; }
.blot-chrcalc-results { margin-top: 12px; }
.blot-chrcalc-kpis { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.blot-chrcalc-kpis .kpi { border: 1px solid #eee; border-radius: 10px; padding: 10px; background:#fafafa; }
.kpi-label { font-size: 12px; color:#666; }
.kpi-value { font-size: 16px; font-weight: 700; margin-top: 2px; }
.blot-chrcalc-foot { margin-top: 10px; font-size: 13px; color:#333; display:flex; flex-direction:column; gap:4px; }
.blot-chrcalc-details { margin-top: 10px; }
.blot-chrcalc-meta { margin-top: 8px; font-size: 13px; color:#333; display:grid; gap:4px; }
@media (max-width: 480px) {
  .blot-chrcalc-grid, .blot-chrcalc-kpis { grid-template-columns: 1fr; }
}
/* ============================================================
   MODAL (popup desktop + plein écran mobile)
   ============================================================ */
html.blot-chrcalc-noscroll,
body.blot-chrcalc-noscroll{ overflow:hidden !important; }

.blot-chrcalc-modal{ display:none; position:fixed; inset:0; z-index:99999; }
.blot-chrcalc-modal.is-open{ display:block; }
.blot-chrcalc-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

.blot-chrcalc-dialog{
  position:relative;
  width:min(720px, calc(100% - 24px));
  margin:8vh auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:14px;
}

.blot-chrcalc-close{
  position:absolute;
  top:8px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid #eee;
  background:#fff;
  font-size:22px;
  line-height:32px;
  cursor:pointer;
}

@media (max-width: 480px){
  .blot-chrcalc-dialog{
    width:100%;
    height:100%;
    margin:0;
    border-radius:0;
    overflow:auto;
    padding-top:44px;
  }
  .blot-chrcalc-close{ top:8px; right:8px; }
}

/* === BLOT CHRCALC UI OVERRIDES === */
/* ============================================================
   UI / TYPO – lisibilité (évite "pattes de mouche")
   ============================================================ */
.blot-chrcalc-card{ font-size:16px; }
.blot-chrcalc-grid label span{ font-size:14px; }
.blot-chrcalc-grid input, .blot-chrcalc-grid select{ font-size:16px; }
.blot-chrcalc-title{ font-size:18px; }
.kpi-label{ font-size:13px; }
.kpi-value{ font-size:18px; }
.blot-chrcalc-scenario-help{ font-size:13px; color:#555; margin-top:6px; line-height:1.35; }

/* Bouton ouverture + bouton calcul (couleur BLOT) */
.blot-chrcalc-btn,
.blot-chrcalc-calcbtn{
  background:#00597b !important;
  border-color:#00597b !important;
  color:#fff !important;
}
.blot-chrcalc-btn:hover,
.blot-chrcalc-calcbtn:hover{
  filter: brightness(0.92);
}

/* Bouton "Calculer" dans la modal : un peu plus visible */
.blot-chrcalc-actions .blot-chrcalc-calcbtn{
  padding:10px 18px;
  border-radius:10px;
  font-weight:600;
}

/* Détails toujours visibles */
.blot-chrcalc-details{ margin-top:14px; border-top:1px solid #eee; padding-top:10px; }
.blot-chrcalc-details-title{ font-weight:700; margin-bottom:6px; }

/* Modal plus large si besoin */
.blot-chrcalc-dialog{ width:min(860px, calc(100% - 24px)); }

/* Aide sous les champs */
.blot-chrcalc-help{
  font-size:13px;
  color:#6b6b6b;
  line-height:1.35;
  margin:4px 0 6px;
}

/* ============================================================
   DESKTOP : saisie à gauche / résultats à droite
   ============================================================ */
@media (min-width: 992px){
  .blot-chrcalc-card{
    display: grid;
    grid-template-columns: minmax(420px, 560px) 1fr;
    gap: 18px 26px;
    align-items: start;
  }
  .blot-chrcalc-left{ grid-column: 1; }
  .blot-chrcalc-right{ grid-column: 2; }

  /* Champs : 1 colonne (évite l’étirement inutile) */
  .blot-chrcalc-grid{
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .blot-chrcalc-results{
    margin-top: 0;
  }
}