/* Calculateur ROI BIM - page /services.
   Reprise du code custom Zyro fourni par Renaud, scope sous .roi-calc
   pour cohabiter avec site.css (le bloc garde son theme sombre "apps"). */

.roi-calc {
  --bg-base: hsl(222, 47%, 11%);
  --accent: hsl(199, 89%, 48%);
  --border: hsl(199, 89%, 48%, 0.2);
  --text-primary: hsl(0, 0%, 95%);
  --text-muted: hsl(0, 0%, 60%);
  color: hsl(0, 0%, 95%);
  margin: 24px 0;
}
.roi-calc, .roi-calc * { font-family: 'Roboto', sans-serif; box-sizing: border-box; }

.roi-calc .glass {
  background: hsl(222,47%,14%,0.95);
  border: 1px solid hsl(199,89%,48%,0.2);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}
.roi-calc .glass h3 {
  color: hsl(199,89%,48%);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.roi-calc .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .roi-calc .grid-2 { grid-template-columns: 1fr; } }
.roi-calc .field { display: flex; flex-direction: column; gap: 6px; }
.roi-calc .field label {
  font-size: 0.82rem;
  color: hsl(0,0%,65%);
  display: flex; align-items: center; gap: 5px;
}
.roi-calc .field label .info {
  cursor: help;
  color: hsl(199,89%,48%,0.6);
  font-size: 0.75rem;
}
.roi-calc input[type="number"], .roi-calc input[type="range"], .roi-calc select {
  background: hsl(222,47%,18%);
  border: 1px solid hsl(199,89%,48%,0.2);
  border-radius: 6px;
  color: white;
  padding: 9px 12px;
  font-size: 0.95rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
.roi-calc input[type="number"]:focus, .roi-calc select:focus {
  border-color: hsl(199,89%,48%);
}
.roi-calc select option { background: hsl(222,47%,14%); }
.roi-calc .range-wrap { display: flex; align-items: center; gap: 10px; }
.roi-calc input[type="range"] {
  padding: 0; height: 6px;
  accent-color: hsl(199,89%,48%);
  cursor: pointer; flex: 1;
}
.roi-calc .range-val {
  min-width: 42px; text-align: right;
  color: hsl(199,89%,48%); font-weight: 700; font-size: 0.95rem;
}
.roi-calc .scenario-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.roi-calc .tab {
  padding: 6px 14px; border-radius: 6px; font-size: 0.82rem; cursor: pointer;
  border: 1px solid hsl(199,89%,48%,0.25);
  color: hsl(0,0%,60%); background: transparent;
  transition: all 0.15s;
}
.roi-calc .tab.active {
  background: hsl(199,89%,48%,0.15);
  border-color: hsl(199,89%,48%,0.6);
  color: hsl(199,89%,48%);
  font-weight: 500;
}
/* Resultats */
.roi-calc .results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.roi-calc .result-card {
  background: hsl(222,47%,17%);
  border: 1px solid hsl(199,89%,48%,0.15);
  border-radius: 8px;
  padding: 16px 14px;
  text-align: center;
}
.roi-calc .result-card .val {
  font-size: 1.45rem; font-weight: 700;
  color: hsl(199,89%,48%);
  line-height: 1.2;
}
.roi-calc .result-card .val.positive { color: hsl(142,71%,50%); }
.roi-calc .result-card .val.negative { color: hsl(0,72%,60%); }
.roi-calc .result-card .lbl {
  font-size: 0.75rem; color: hsl(0,0%,55%);
  margin-top: 5px; line-height: 1.3;
}
.roi-calc .roi-banner {
  background: linear-gradient(135deg, hsl(199,89%,48%,0.1), hsl(199,89%,48%,0.04));
  border: 1px solid hsl(199,89%,48%,0.35);
  border-radius: 10px;
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.roi-calc .roi-banner .roi-val {
  font-size: 2.5rem; font-weight: 700;
}
.roi-calc .roi-banner .roi-lbl { font-size: 0.85rem; color: hsl(0,0%,55%); }
.roi-calc .roi-banner .roi-desc { color: hsl(0,0%,80%); font-size: 0.9rem; max-width: 380px; }
.roi-calc table.detail {
  width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0;
}
.roi-calc table.detail th {
  color: hsl(199,89%,48%); border: none;
  border-bottom: 1px solid hsl(199,89%,48%,0.2);
  padding: 6px 10px; text-align: left; font-weight: 500;
  background: transparent;
}
.roi-calc table.detail td {
  padding: 7px 10px; border: none;
  border-bottom: 1px solid hsl(199,89%,48%,0.08);
  color: hsl(0,0%,82%);
}
.roi-calc table.detail td:last-child { color: hsl(142,71%,50%); font-weight: 500; text-align: right; }
.roi-calc table.detail tr:last-child td { border-bottom: none; }
.roi-calc .cap-notice {
  display: none;
  background: hsl(38,92%,50%,0.08);
  border-left: 3px solid hsl(38,92%,50%,0.6);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 0.78rem;
  color: hsl(38,92%,70%);
  margin-bottom: 16px;
  line-height: 1.5;
}
.roi-calc .cap-notice.visible { display: block; }
.roi-calc .sources {
  font-size: 0.72rem; color: hsl(0,0%,40%); line-height: 1.6;
  margin-top: 24px;
  border-top: 1px solid hsl(199,89%,48%,0.1);
  padding-top: 14px;
}
.roi-calc .sources a { color: hsl(199,89%,48%,0.5); text-decoration: none; }
.roi-calc .sources a:hover { color: hsl(199,89%,48%); }
.roi-calc .sources strong { color: hsl(0,0%,50%); }
.roi-calc .disclaimer {
  background: hsl(222,47%,16%);
  border-left: 3px solid hsl(199,89%,48%,0.4);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 0.78rem;
  color: hsl(0,0%,55%);
  margin-bottom: 20px;
}
/* CTA du calculateur */
.roi-calc .cta-roi {
  background: linear-gradient(135deg, hsl(199,89%,48%,0.12), hsl(199,89%,48%,0.04));
  border: 1px solid hsl(199,89%,48%,0.35);
  border-radius: 10px;
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.roi-calc .cta-roi .cta-txt { max-width: 480px; }
.roi-calc .cta-roi .cta-title { color: hsl(199,89%,48%); font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.roi-calc .cta-roi .cta-sub { color: hsl(0,0%,70%); font-size: 0.85rem; line-height: 1.5; }
.roi-calc .cta-roi a.cta-btn {
  background: hsl(199,89%,48%);
  color: hsl(222,47%,11%);
  font-weight: 700; font-size: 0.88rem;
  padding: 11px 20px; border-radius: 6px;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.roi-calc .cta-roi a.cta-btn:hover { background: hsl(199,89%,58%); }