/* =============================================================================
   M&L Calculatrice d'interets composes — feuille de style dediee (module isole)
   -----------------------------------------------------------------------------
   ISOLATION : toutes les regles sont scopees sous .ml-calc (le conteneur racine
   du shortcode [ml_calc_interets]). Aucun selecteur generique (*, html, body,
   input[type=range]) ne fuit vers le theme ou les autres outils. Les variables
   sont posees sur .ml-calc (pas :root).

   Charte : alignee sur les tokens V3 de l'espace client M&L.
     creme #faf9f7 · texte #1a1a1a · or #c49a3c (hover #b38a30) · blanc #fff
     serie "versements" (sombre) #3a352e · serie "interets" (or) #c49a3c
     capital final (hero) : vert natif de la charte --v3-green #2c6e49
   AUCUN bleu. Titres Instrument Serif, corps Inter. Zero dependance / aucun CDN.
   ============================================================================= */

.ml-calc {
  --mlc-or: #c49a3c;
  --mlc-or-hover: #b38a30;
  --mlc-or-clair: #e4cd93;
  --mlc-creme: #faf9f7;
  --mlc-creme-fonce: #f2efe9;
  --mlc-texte: #1a1a1a;
  --mlc-texte-doux: #5a5a5a;
  --mlc-neutre: #3a352e;        /* serie "versements" (graphe + carte Total verse) */
  --mlc-neutre-clair: #524b41;
  /* Vert foret : token natif de l'espace client (--v3-green), reserve EXCLUSIVEMENT au capital final. */
  --mlc-vert: #2c6e49;
  --mlc-vert-pale: #eef4f0;
  --mlc-vert-pale-2: #f3f8f5;
  --mlc-vert-bordure: #cfe3d8;
  --mlc-bordure: #e7e1d6;
  --mlc-blanc: #ffffff;
  --mlc-ombre: 0 1px 3px rgba(26, 26, 26, 0.06), 0 8px 28px rgba(26, 26, 26, 0.08);
  --mlc-rayon: 16px;
  --mlc-serif: "Instrument Serif", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mlc-sans: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  font-family: var(--mlc-sans);
  color: var(--mlc-texte);
  line-height: 1.6;
  font-size: 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset local (scope au module, ne fuit pas) */
.ml-calc *,
.ml-calc *::before,
.ml-calc *::after { box-sizing: border-box; }

/* En-tete */
.ml-calc .mlc-entete {
  text-align: center;
  margin-bottom: 36px;
}
.ml-calc .mlc-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mlc-or);
  font-weight: 600;
  margin: 0 0 14px;
}
.ml-calc .mlc-entete .mlc-titre {
  font-family: var(--mlc-serif);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--mlc-texte);
  margin: 0;
}
.ml-calc .mlc-sous {
  margin: 12px auto 0;
  color: var(--mlc-texte-doux);
  font-size: clamp(15px, 2.2vw, 17px);
  max-width: 560px;
}

/* Carte principale */
.ml-calc .mlc-carte {
  background: var(--mlc-blanc);
  border: 1px solid var(--mlc-bordure);
  border-radius: var(--mlc-rayon);
  box-shadow: var(--mlc-ombre);
  overflow: hidden;
}
.ml-calc .mlc-grille {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
}

/* Colonne des reglages */
.ml-calc .mlc-panneau {
  padding: 32px;
  background: var(--mlc-creme);
  border-right: 1px solid var(--mlc-bordure);
}
.ml-calc .mlc-panneau h2 {
  font-family: var(--mlc-serif);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 4px;
}
.ml-calc .mlc-aide {
  color: var(--mlc-texte-doux);
  font-size: 13.5px;
  margin: 0 0 26px;
}

.ml-calc .mlc-champ { margin-bottom: 26px; }
.ml-calc .mlc-champ:last-child { margin-bottom: 0; }

.ml-calc .mlc-champ-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ml-calc .mlc-champ-tete label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mlc-texte);
}

/* Champ numerique + unite */
.ml-calc .mlc-valbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mlc-blanc);
  border: 1px solid var(--mlc-bordure);
  border-radius: 10px;
  padding: 4px 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ml-calc .mlc-valbox:focus-within {
  border-color: var(--mlc-or);
  box-shadow: 0 0 0 3px rgba(196, 154, 60, 0.16);
}
.ml-calc .mlc-valbox input[type="number"] {
  width: 84px;
  border: none;
  background: transparent;
  font-family: var(--mlc-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--mlc-texte);
  text-align: right;
  padding: 3px 0;
  margin: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ml-calc .mlc-valbox input[type="number"]::-webkit-outer-spin-button,
.ml-calc .mlc-valbox input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ml-calc .mlc-valbox input[type="number"]:focus { outline: none; box-shadow: none; }
.ml-calc .mlc-unite {
  font-size: 14px;
  font-weight: 600;
  color: var(--mlc-texte-doux);
}

/* Slider a la charte (scope .ml-calc) */
.ml-calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--mlc-creme-fonce);
  outline: none;
  cursor: pointer;
  margin: 6px 0 4px;
  padding: 0;
}
.ml-calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}
.ml-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mlc-or);
  border: 3px solid var(--mlc-blanc);
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.25);
  margin-top: -8px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ml-calc input[type="range"]::-webkit-slider-thumb:hover { background: var(--mlc-or-hover); }
.ml-calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.ml-calc input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--mlc-creme-fonce);
}
.ml-calc input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--mlc-or-clair);
}
.ml-calc input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mlc-or);
  border: 3px solid var(--mlc-blanc);
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.25);
  cursor: pointer;
}
.ml-calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(196, 154, 60, 0.28); }
.ml-calc input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(196, 154, 60, 0.28); }

.ml-calc .mlc-bornes {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--mlc-texte-doux);
}

/* Selecteur de frequence (segments) */
.ml-calc .mlc-segments {
  display: inline-flex;
  background: var(--mlc-creme-fonce);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  margin-top: 14px;
}
.ml-calc .mlc-segments button {
  font-family: var(--mlc-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mlc-texte-doux);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ml-calc .mlc-segments button:hover { color: var(--mlc-texte); }
.ml-calc .mlc-segments button[aria-pressed="true"] {
  background: var(--mlc-blanc);
  color: var(--mlc-texte);
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.12);
}

/* Colonne resultats */
.ml-calc .mlc-resultats { padding: 32px; }

.ml-calc .mlc-graphe-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.ml-calc .mlc-graphe-tete h2 {
  font-family: var(--mlc-serif);
  font-weight: 400;
  font-size: 24px;
  margin: 0;
}
.ml-calc .mlc-legende {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.ml-calc .mlc-legende .mlc-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mlc-texte-doux);
  font-weight: 600;
}
.ml-calc .mlc-pastille {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  display: inline-block;
}
.ml-calc .mlc-pastille.mlc-vers { background: var(--mlc-neutre); }
.ml-calc .mlc-pastille.mlc-int { background: var(--mlc-or); }

/* SVG chart */
.ml-calc .mlc-chart-box {
  width: 100%;
  margin-top: 6px;
}
.ml-calc svg.mlc-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ml-calc svg.mlc-chart text { font-family: var(--mlc-sans); fill: var(--mlc-texte-doux); }
.ml-calc .mlc-axis-line { stroke: var(--mlc-bordure); stroke-width: 1; }
.ml-calc .mlc-grid-line { stroke: var(--mlc-bordure); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.7; }
.ml-calc .mlc-area-vers { fill: var(--mlc-neutre); }
.ml-calc .mlc-area-int { fill: var(--mlc-or); }
.ml-calc .mlc-line-total { fill: none; stroke: var(--mlc-or-hover); stroke-width: 2; opacity: 0.55; }

/* Curseur survol graphe */
.ml-calc .mlc-hover-line { stroke: var(--mlc-neutre); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; }
.ml-calc .mlc-hover-dot { fill: var(--mlc-blanc); stroke: var(--mlc-or-hover); stroke-width: 2; }
.ml-calc .mlc-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--mlc-texte);
  color: var(--mlc-creme);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.28);
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 0.12s ease;
  white-space: nowrap;
  z-index: 5;
}
.ml-calc .mlc-tooltip b { color: var(--mlc-blanc); font-weight: 700; }
.ml-calc .mlc-tooltip .mlc-t-int { color: var(--mlc-or-clair); }
.ml-calc .mlc-chart-wrap { position: relative; }

/* Chiffres cles */
.ml-calc .mlc-chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.ml-calc .mlc-chiffre {
  background: var(--mlc-creme);
  border: 1px solid var(--mlc-bordure);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
}
/* Carte hero "Capital final" = resultat le plus important : vert foret profond (--v3-green). */
.ml-calc .mlc-chiffre.mlc-hero {
  background: linear-gradient(160deg, var(--mlc-vert-pale-2) 0%, var(--mlc-vert-pale) 100%);
  border-color: var(--mlc-vert-bordure);
}
/* Carte "Interets gagnes" = meme code couleur que la serie interets du graphe (or), traitement leger. */
.ml-calc .mlc-chiffre.mlc-interets {
  background: linear-gradient(160deg, #fdfaf3 0%, #fbf6ea 100%);
  border-color: var(--mlc-or-clair);
}
/* Carte "Total verse" = meme code couleur que la serie versements du graphe (neutre sombre). */
.ml-calc .mlc-chiffre.mlc-verse {
  background: var(--mlc-creme);
  border-color: var(--mlc-bordure);
}
.ml-calc .mlc-chiffre .mlc-etiq {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mlc-texte-doux);
  font-weight: 600;
  margin-bottom: 8px;
}
.ml-calc .mlc-chiffre.mlc-hero .mlc-etiq { color: var(--mlc-vert); }
.ml-calc .mlc-chiffre.mlc-interets .mlc-etiq { color: var(--mlc-or-hover); }
.ml-calc .mlc-chiffre.mlc-verse .mlc-etiq { color: var(--mlc-neutre-clair); }
.ml-calc .mlc-chiffre .mlc-montant {
  font-family: var(--mlc-serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.1;
  color: var(--mlc-texte);
  font-variant-numeric: tabular-nums;
}
/* Chiffre hero legerement plus grand pour renforcer la hierarchie. */
.ml-calc .mlc-chiffre.mlc-hero .mlc-montant {
  color: var(--mlc-vert);
  font-size: clamp(28px, 4.4vw, 38px);
}
.ml-calc .mlc-chiffre.mlc-interets .mlc-montant { color: var(--mlc-or-hover); }
.ml-calc .mlc-chiffre.mlc-verse .mlc-montant { color: var(--mlc-neutre); }
.ml-calc .mlc-chiffre .mlc-detail {
  margin-top: 6px;
  font-size: 12px;
  color: var(--mlc-texte-doux);
}

/* Note de bas + disclaimer */
.ml-calc .mlc-pied {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--mlc-texte-doux);
  line-height: 1.55;
  text-align: center;
}

/* Responsive */
@media (max-width: 860px) {
  .ml-calc .mlc-grille { grid-template-columns: 1fr; }
  .ml-calc .mlc-panneau { border-right: none; border-bottom: 1px solid var(--mlc-bordure); }
}
@media (max-width: 560px) {
  .ml-calc .mlc-panneau,
  .ml-calc .mlc-resultats { padding: 22px; }
  .ml-calc .mlc-chiffres { grid-template-columns: 1fr; gap: 12px; }
  .ml-calc .mlc-valbox input[type="number"] { width: 72px; }
  .ml-calc .mlc-graphe-tete { flex-direction: column; align-items: flex-start; }
}