/* Bloc "Calculateur" — voir IHM_PAGE_ACCUEIL_CALCULATEUR_ROI_algo.md pour le détail de tous
   les choix (vocabulaire généralisé, hiérarchie des résultats, motif pagne). Padding de section
   aligné sur #prestige (90px 24px 90px) — voir la note d'harmonisation dans cet algo. */
#calculator { position: relative; overflow: hidden; background: var(--marine); padding: 90px 24px 90px; }
#calculator .calc-texture { position: absolute; inset: 0; z-index: 0; }
#calculator .calc-texture svg { width: 100%; height: 100%; display: block; }
#calculator .calc-glow {
  position: absolute; width: 620px; height: 620px; z-index: 0;
  background: radial-gradient(ellipse, rgba(202,138,4,0.15) 0%, transparent 68%);
  top: calc(0% - 260px); left: calc(50% - 310px);
}
#calculator .calc-inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
#calculator .calc-header { max-width: 640px; margin: 0 0 56px; }
#calculator .calc-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 18px;
}
#calculator .calc-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; color: var(--text-cream); margin: 0 0 16px;
}
#calculator .calc-title em { font-style: italic; color: var(--gold-light); }
#calculator .calc-intro { font-size: 15px; line-height: 1.6; color: var(--text-sec-dark); margin: 0; }

#calculator .calc-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch;
  background: rgba(248,244,239,0.07); border: 1px solid var(--border-dark); border-radius: 16px; padding: 44px;
}
#calculator .calc-inputs { display: flex; flex-direction: column; gap: 26px; }
#calculator .calc-field label {
  display: block; font-size: 13px; color: var(--text-sec-dark); margin-bottom: 10px;
}
#calculator .calc-field-hint { color: var(--text-tert); font-weight: 400; }
#calculator .calc-field-row { display: flex; align-items: center; gap: 16px; }
/* Échos de curseur — ton neutre volontaire : ce ne sont que des relectures de saisie,
   l'accent visuel doit rester sur le résultat (#r-gain), jamais ici. */
#calculator .calc-val {
  flex: 0 0 auto; min-width: 78px; text-align: right; font-family: var(--font-body);
  font-size: 13.5px; font-weight: 600; color: var(--text-sec-dark);
}
/* Piste "progress-style" : dégradé calculé en JS par curseur (voir updateSliderFill dans
   calculator.js), pas un simple aplat — la portion parcourue se distingue du reste de la piste. */
#calculator input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px;
  outline: none; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
#calculator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--text-cream); cursor: pointer;
  box-shadow: 0 0 0 4px rgba(202,138,4,0.18), 0 2px 6px rgba(0,0,0,0.35);
  transition: box-shadow 0.2s ease;
}
#calculator input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px rgba(202,138,4,0.28), 0 2px 6px rgba(0,0,0,0.35);
}
#calculator input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--text-cream); cursor: pointer;
  box-shadow: 0 0 0 4px rgba(202,138,4,0.18), 0 2px 6px rgba(0,0,0,0.35);
  transition: box-shadow 0.2s ease;
}
#calculator input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 7px rgba(202,138,4,0.28), 0 2px 6px rgba(0,0,0,0.35);
}

#calculator .calc-results {
  background: var(--marine); border: 1px solid rgba(202,138,4,0.25); border-radius: 12px;
  padding: 36px 32px; display: flex; flex-direction: column; justify-content: center;
}
#calculator .calc-result-label { font-size: 12px; color: var(--text-sec-dark); margin-bottom: 6px; }
/* Gain mensuel = le chiffre qui vend, seul à porter l'or + le relief — le reste des
   résultats (contacts récupérés, ROI) reste un cran en dessous. */
#calculator .calc-result-num {
  font-family: var(--font-display); font-size: 40px; color: var(--gold-light);
  text-shadow: 0 0 24px rgba(226,168,50,0.35);
}
#calculator .calc-result-num--sm { font-size: 24px; color: var(--text-cream); text-shadow: none; }
#calculator .calc-divider { height: 1px; background: var(--border-dark); margin: 20px 0; }
#calculator .calc-result-sub { font-size: 14px; color: var(--text-sec-dark); font-weight: 700; }
#calculator .calc-result-sub span { color: var(--gold-light); }
#calculator .calc-note { font-size: 12px; color: var(--text-tert); margin-top: 18px; line-height: 1.5; }

@media (max-width: 800px) {
  #calculator .calc-layout { grid-template-columns: 1fr; padding: 28px; }
}