/* Calculateur MODOTO : structure OOO, styles limités à cette section. */
#calculateur.calc-cost { background: #F2F2F1; color: #1C1917; }
.calc-cost .lead { max-width: 780px; }
.calc-cost__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.calc-cost__inputs, .calc-cost__result { border-radius: 28px; padding: 36px; min-width: 0; }
.calc-cost__inputs { background: #FFF; display: flex; flex-direction: column; gap: 40px; }
.calc-slider__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-bottom: 8px; }
.calc-slider label { font-size: 15px; line-height: 1.5; font-weight: 500; color: #1C1917; }
.calc-slider__example { display: inline-block; font-size: 11px; font-weight: 400; color: #C2410C; margin-left: 6px; border-bottom: 1px dotted #C2410C; }
.calc-slider__value { white-space: nowrap; font-size: 22px; font-weight: 600; line-height: 1.15; color: #1C1917; }
.calc-slider__value span { font-size: 13px; font-weight: 400; color: #78716C; }
.calc-slider input[type=range] { --progress: 0%; display: block; width: 100%; height: 28px; margin: 0; border: 0; border-radius: 99px; cursor: pointer; appearance: none; -webkit-appearance: none; background: linear-gradient(to right, #EA580C 0%, #EA580C var(--progress), #F0F0EE var(--progress), #F0F0EE 100%); background-size: 100% 6px; background-repeat: no-repeat; background-position: center; }
.calc-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #FFF; border: 2px solid #EA580C; box-shadow: 0 3px 8px rgba(234,88,12,.2); }
.calc-slider input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #FFF; border: 2px solid #EA580C; box-shadow: 0 3px 8px rgba(234,88,12,.2); }
.calc-slider input[type=range]:focus-visible { outline: 3px solid #9A3412; outline-offset: 8px; }
.calc-slider__hint, .calc-cost__example { font-size: 12px; line-height: 1.55; color: #78716C; margin: 8px 0 0; }
.calc-cost__example { margin-top: auto; }
.calc-cost__result { background: var(--night); color: #FAF8F4; container-type: inline-size; }
.calc-cost__eyebrow { margin: 0 0 18px; font-size: 15px; color: #A8A29E; }
.calc-cost__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; line-height: 1.05; }
.calc-cost__total strong { font-family: 'Cal Sans', sans-serif; font-weight: 400; letter-spacing: -.045em; font-size: clamp(42px, 6vw, 84px); font-size: clamp(38px, 16cqw, 84px); white-space: nowrap; }
.calc-cost__total > span { font-size: 20px; color: #A8A29E; }
.calc-cost__monthly { font-size: 15px; color: #D6D3D1; margin: 20px 0 0; }
.calc-cost__composition { font-size: 11px; color: #A8A29E; margin: 8px 0 26px; line-height: 1.5; }
.calc-cost__breakdown { margin: 0; }
.calc-cost__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 20px 0; border-top: 1px solid #383230; }
.calc-cost__row dt { font-size: 15px; color: #D6D3D1; }
.calc-cost__row small { display: block; font-size: 12px; color: #A8A29E; margin-top: 6px; line-height: 1.5; }
.calc-cost__row dd { margin: 0; font-size: 18px; font-weight: 500; white-space: nowrap; }
.calc-cost__comparison { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; background: rgba(255,255,255,.055); border: 1px solid #383230; border-radius: 18px; padding: 22px; margin-top: 26px; }
.calc-cost__comparison p { margin: 0; color: #D6D3D1; font-size: 14px; line-height: 1.6; }
.calc-cost__comparison strong { font-family: 'Cal Sans', sans-serif; color: #F97316; font-size: 48px; font-weight: 400; white-space: nowrap; letter-spacing: -.04em; }
.calc-cost__note { position: relative; font-size: 14px; line-height: 1.65; color: #FAF8F4; padding-left: 20px; margin: 22px 0; }
.calc-cost__note > span { position: absolute; top: 7px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #EA580C; box-shadow: 0 0 0 4px rgba(234,88,12,.18); }
.calc-cost__cta { border-radius: 99px; background: #EA580C; color: #FFF; }
.calc-cost__cta:hover { background: #C2410C; }
.calc-cost__hyp { font-size: 11px; color: #A8A29E; line-height: 1.65; margin: 16px 0 0; }
@media (max-width: 860px) {
  .calc-cost__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .calc-cost__inputs, .calc-cost__result { padding: 26px 22px; border-radius: 24px; }
  .calc-cost__inputs { gap: 34px; }
  .calc-slider label { font-size: 14px; }
  .calc-cost__comparison { padding: 18px; gap: 12px; }
  .calc-cost__comparison p { font-size: 12px; }
  .calc-cost__comparison strong { font-size: 40px; }
  .calc-cost__row { gap: 12px; }
  .calc-cost__row dt { font-size: 14px; }
  .calc-cost__row dd { font-size: 16px; }
}

/* Le décor MODOTO remplace le halo d’OOO : lignes fines et intersections orange. */
.calc-cost__result.has-grid {
  overflow: hidden;
  --grid-line: rgba(234, 88, 12, .08);
  --grid-dot: rgba(234, 88, 12, .35);
  --grid-mask: radial-gradient(90% 75% at 50% 0%, #000 25%, transparent 80%);
  --grid-dot-mask: radial-gradient(50% 40% at 50% 0%, #000 10%, transparent 70%);
}