/* ---------- page calculs de dates (spécifique) ---------- */
main.calc{
  max-width:860px; margin:0 auto; padding:24px 22px 40px;
  display:flex; flex-direction:column; gap:18px;
}
.presets{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px}
.preset{
  font-family:var(--serif); font-size:13px; padding:4px 11px;
  border:1px solid var(--line); background:var(--card); border-radius:999px;
  color:var(--ink-soft); cursor:pointer; transition:.15s;
}
.preset:hover{background:var(--ox); border-color:var(--ox); color:#fff}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px}
.stat{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; min-width:0;
}
.stat b{display:block; font-size:19px; color:var(--ox); line-height:1.3; font-weight:700; overflow-wrap:anywhere}
.stat span{font-size:12.5px; color:var(--ink-soft); line-height:1.4}
.stat.wide{grid-column:1 / -1}
.stat.wide b{font-size:23px}
.stat.blue b{color:var(--blue)}

/* ---------- section convertisseurs (lien) ---------- */
.card.soon{opacity:.85; border-style:dashed; background:var(--bg-soft); box-shadow:none}
.card.soon .num{background:var(--card)}
.soon-text{margin:0; color:var(--ink-soft); font-style:italic; font-size:15px}
.soon-text a{color:var(--ox); font-style:normal; font-weight:700}

@media (max-width:640px){
  main.calc{padding:16px 12px 32px}
  .field input, .field select{min-width:0; width:100%}
  .field{flex:1 1 40%}
  .swap{align-self:flex-end}
}