/*
 * MaBankroll : styles des widgets calculateurs publics (public/calculateurs/**).
 *
 * Chargé EN PLUS de /guides/guides.css (tokens --mb-*, nav, footer, article,
 * .callout, .formula, .cta). Ici : uniquement les composants interactifs
 * (panneau de saisie, résultats, presets) et les cards du hub calculateurs.
 *
 * ⚠️ SYNC : les tokens viennent de guides.css (lui-même dupliqué depuis
 * src/features/landing/landing-tokens.css). Ne pas redéfinir de token ici.
 */

/* ---------- Panneau calculateur ---------- */
.calc {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line-2);
  border-radius: 14px;
  padding: 24px;
  margin: 28px 0;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.calc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-ink-3);
}
.calc-field input {
  background: var(--mb-bg);
  border: 1px solid var(--mb-line-2);
  border-radius: 10px;
  color: var(--mb-ink);
  font-size: 17px;
  font-family: var(--mb-mono);
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
  transition: border-color var(--mb-dur-1) var(--mb-ease);
}
.calc-field input:focus {
  outline: none;
  border-color: var(--mb-accent);
}
.calc-field .hint { font-size: 12px; color: var(--mb-ink-4); }

/* Presets (Kelly plein / 1/2 / 1/4) */
.calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.calc-preset {
  appearance: none;
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line-2);
  border-radius: 999px;
  color: var(--mb-ink-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  transition: all var(--mb-dur-1) var(--mb-ease);
}
.calc-preset:hover { border-color: var(--mb-accent); color: var(--mb-ink); }
.calc-preset.active {
  background: var(--mb-accent);
  border-color: var(--mb-accent);
  color: var(--mb-accent-ink);
}

/* Résultats */
.calc-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.calc-result {
  background: var(--mb-bg);
  border: 1px solid var(--mb-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.calc-result .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-ink-4);
  margin-bottom: 4px;
}
.calc-result .value {
  font-family: var(--mb-mono);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mb-ink);
}
.calc-result .value.pos { color: var(--mb-win); }
.calc-result .value.neg { color: var(--mb-lose); }
.calc-result .sub { font-size: 12px; color: var(--mb-ink-4); margin-top: 2px; }

/* Message d'état (edge négatif, saisie incomplète) */
.calc-note {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line);
  color: var(--mb-ink-2);
}
.calc-note.warn {
  border-color: rgba(248, 113, 113, 0.4);
  color: var(--mb-lose);
}

/* Bouton téléchargement (template Excel) */
.calc-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
}
.calc-download .file-meta { font-size: 13px; color: var(--mb-ink-4); }

/* ---------- Hub calculateurs ---------- */
.calc-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 32px 0;
}
.calc-card {
  display: block;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line-2);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  transition: border-color var(--mb-dur-1) var(--mb-ease), transform var(--mb-dur-1) var(--mb-ease);
}
.calc-card:hover { border-color: var(--mb-accent); transform: translateY(-2px); }
.calc-card h2, .calc-card h3 {
  margin: 12px 0 8px;
  font-size: 18px;
  color: var(--mb-ink);
}
.calc-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mb-ink-3); }
.calc-card .calc-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198, 242, 78, 0.12);
  color: var(--mb-accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .calc { padding: 18px; }
  .calc-grid, .calc-grid--2 { grid-template-columns: 1fr; }
  .calc-results { grid-template-columns: 1fr; }
  .calc-hub-grid { grid-template-columns: 1fr; }
}