/* Outil · Épargne et intérêts (Savings), id epargne : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ep-
   À gauche : le capital final en grand, versé et intérêts (avec leur couleur, la légende du graphique), × n ; le
   graphique année par année (barres empilées) ; la règle de 72 ; Copier et le lien vers Prêt hypothécaire.
   À droite : départ, chaque mois, taux, durée, et des durées toutes faites. */
.ep .outil-fixe { align-items: stretch; }
.ep-carte { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 6px 18px 4px; }
.ep-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 76px; border-bottom: 1px solid var(--filet-doux); }
.ep-grand span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); white-space: nowrap; }
.ep-grand b { font: 700 clamp(26px, 7.5vw, 36px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--peche); white-space: nowrap; }
.ep-rangee { cursor: default; height: 44px; align-items: center; }
.ep-rangee:last-child { border-bottom: 0; }
.ep-rangee:hover .nom { color: var(--papier); }
.ep-rangee .nom { display: inline-flex; align-items: center; gap: 8px; }
.ep-rangee .val { font-variant-numeric: tabular-nums; }
.ep-pastille { width: 10px; height: 10px; border-radius: 3px; }
.ep-graphe { width: 100%; height: auto; display: block; }
.ep-grille { stroke: var(--filet-doux); stroke-width: 1; }
.ep-axe { font: 500 10px var(--mono); fill: var(--texte2); }
.ep-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.ep-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ep-actions .pastille { cursor: pointer; }
.ep-actions .pastille:hover { translate: none; }
.ep-actions .pastille:disabled { opacity: .3; cursor: default; }
.ep-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.ep-durees .puce { cursor: pointer; }