/* Essai Content OS, section « Ce que ça vaut » (retour de Jack, 25/09) : la valeur avant le prix,
   avec un calculateur qui ne sert que les chiffres du visiteur. */

/* Le calculateur vient en premier (retour de Jack, 25/09) : le chiffre d'abord, les raisons ensuite. */
.calcul {
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line), var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 24px 40px;
  align-items: start;
}
.calcul-intro h3 { font-size: 1.5rem; }
.calcul-intro .small { margin-top: 8px; }
.calcul-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.calcul-result,
.calcul .note { grid-column: 1 / -1; }
.calcul-result {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.calcul-result strong { color: var(--accent-text); font-weight: 700; }
.calcul .note { margin-top: -8px; }

/* Sans JavaScript, le calculateur ne peut rien calculer : on ne le montre pas. */
html:not(.js) .calcul { display: none; }

@media (max-width: 860px) {
  .calcul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .calcul-form { grid-template-columns: 1fr; }
}

/* Accueil (essai, 25/09) : le calculateur renvoie vers l'offre. */
.calcul-suite { grid-column: 1 / -1; }