/* Outil · Prêt hypothécaire (Mortgage) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ph-
   À gauche : les deux prêts en cartes (B grisé sans « Comparer » ; toucher une carte la choisit), le graphique par année
   (hauteur fixe ; la ligne du dessus donne la légende, ou l'année survolée), l'info (2 lignes fixes), l'export.
   À droite : les champs, puis le tableau par année (cadre de hauteur fixe qui défile). Au téléphone, les champs d'abord. */
.ph .outil-fixe { align-items: stretch; }

/* Les cartes */
.ph-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-carte { border: 0; border-radius: 14px; padding: 14px 14px 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-doux); cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--papier); min-width: 0;
  transition: background .3s var(--courbe), box-shadow .3s var(--courbe), opacity .4s var(--courbe); }
.ph-carte:hover { background: rgba(242, 240, 235, .04); }
.ph-carte[aria-pressed="true"] { background: rgba(242, 240, 235, .07); box-shadow: inset 0 0 0 1px var(--papier); }
.ph-carte:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ph-carte-tete { display: flex; flex-direction: column; gap: 3px; }
.ph-carte-tete b { font: 600 13px/1.2 var(--corps); }
.ph-carte-tete i { font: 500 10.5px/1.2 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-mens { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; min-height: 1.2em; }
.ph-mens strong { font: 700 22px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-mens small { font: 500 11px/1 var(--mono); color: var(--texte2); }
.ph-rang { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/1.3 var(--mono); }
.ph-rang em { font-style: normal; color: var(--texte2); white-space: nowrap; }
.ph-rang span { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {   /* téléphone : « /mois » toujours sous le montant, les rangées sur 2 lignes : hauteur fixe */
  .ph-mens { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ph-mens strong { font-size: 18px; }
  .ph-rang { flex-direction: column; gap: 1px; }
}
.ph-eteint { opacity: .3; pointer-events: none; }

/* Le graphique */
.ph-graphe { display: flex; flex-direction: column; gap: 8px; }
.ph-legende { position: relative; height: 16px; display: flex; gap: 16px; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--texte2); }
.ph-legende span { display: flex; align-items: center; gap: 6px; }
.ph-legende i { width: 10px; height: 10px; border-radius: 3px; }
.ph-legende b:not(:empty) { position: absolute; inset: 0; display: flex; align-items: center; background: var(--noir); color: var(--papier); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* l'année survolée remplace la légende, au même endroit */
.ph-svg { display: block; width: 100%; height: 150px; overflow: visible; }
.ph-svg text { fill: var(--texte2); font: 500 10px var(--mono); }
.ph-svg .ph-axe { stroke: var(--filet); stroke-width: 1; }
.ph-survol { fill: rgba(242, 240, 235, .07); pointer-events: none; }

.ph-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.ph-actions { display: flex; justify-content: center; }
.ph-actions .pastille { cursor: pointer; }
.ph-actions .pastille:hover { translate: none; }
.ph-actions .pastille:disabled { opacity: .3; cursor: default; }

/* Les champs */
.ph-entrees { display: flex; flex-direction: column; gap: 22px; }
.ph-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ph-pret .groupe { margin-bottom: 10px; }
.ph-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: end; }
.ph-duree b { min-width: 4.5em; text-align: right; }

/* Le tableau par année */
.ph-tableau .groupe { margin-bottom: 8px; }
.ph-table { height: 320px; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 0 12px 6px; }
.ph-trow { display: grid; grid-template-columns: 3.8em repeat(4, minmax(0, 1fr)); gap: 8px; height: 32px; align-items: center; border-bottom: 1px solid var(--filet-doux);
  font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--papier); }
.ph-trow span { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-trow span:first-child { text-align: left; color: var(--texte2); }
.ph-tete { position: sticky; top: 0; background: var(--noir); color: var(--texte2); font-size: 10.5px; letter-spacing: .04em; }

@media (max-width: 959px) { .ph-entrees { order: -1; } }