/* ═══════════════ PORTFOLIO (v2.48) : des portefeuilles simulés — les cartes, la vue d'un portfolio, ses actions, le formulaire ═══════════════
   Que des var(--ht-…) : clair et sombre ; gains verts, pertes rouges ; les marchés aux couleurs des comptes (--acct-1…8). */

/* ── les cartes : un portfolio chacune (valeur, P&L, répartition) ── */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .8rem; margin-bottom: .9rem; }
.pf-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .75rem .9rem .7rem;
  border: 1px solid var(--ht-border-color); border-top: 3px solid transparent; border-radius: var(--ht-border-radius-lg); background: var(--ht-card-bg);
  box-shadow: var(--ht-box-shadow-sm); transition: border-color .12s, box-shadow .12s; }
.pf-card:hover { box-shadow: var(--ht-box-shadow); }
.pf-card:focus-visible { outline: 2px solid var(--ht-primary); outline-offset: 2px; }
.pf-card.on { border-top-color: var(--ht-primary); background: color-mix(in srgb, var(--ht-primary) 5%, var(--ht-card-bg)); }
.pf-card .nm { font-weight: 700; font-size: .86rem; color: var(--ht-heading-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-card .v { font-family: var(--ht-font-monospace); font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; color: var(--ht-heading-color); line-height: 1.2; }
.pf-card .pl { font-family: var(--ht-font-monospace); font-size: .74rem; font-weight: 600; color: var(--ht-gray-700); }
.pf-card .bar { display: flex; gap: 2px; height: .3rem; margin: .3rem 0 .2rem; border-radius: 1rem; overflow: hidden; background: var(--ht-gray-200); }
.pf-card .bar i { display: block; height: 100%; min-width: 2px; }
.pf-card .sub { font-size: .66rem; color: var(--ht-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-card.pf-add { align-items: center; justify-content: center; flex-direction: row; gap: .5rem; border-style: dashed; border-top-width: 1px; border-color: var(--ht-gray-300);
  background: transparent; box-shadow: none; color: var(--ht-gray-700); font-size: .8rem; font-weight: 600; min-height: 6.2rem; }
.pf-card.pf-add:hover { border-color: var(--ht-primary); color: var(--ht-primary); }
.pf-card.pf-add .plus { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--ht-primary-rgb), .12); color: var(--ht-primary); }

/* ── l'en-tête d'un portfolio : son nom, ses repères, ses actions ── */
.pf-head { margin-bottom: .9rem; }
.pf-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; }
.pf-title { min-width: 0; }
.pf-title h2 { font-size: 1.1rem; margin: 0 0 .35rem; }
.pf-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.pf-chips .ht-srcb { margin-left: .25rem; }
.pf-notes { margin-top: .45rem; font-size: .76rem; color: var(--ht-gray-700); white-space: pre-wrap; max-width: 46rem; }
.pf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.pf-acts .btn.active { border-color: rgba(var(--ht-primary-rgb), .5); color: var(--ht-primary); }
.pf-acts .ht-rowbtn { padding: .2rem .5rem; }
.pf-acts .ht-rowbtn.active { color: var(--ht-primary); border-color: rgba(var(--ht-primary-rgb), .45); }
.pf-sep { width: 1px; height: 1.4rem; background: var(--ht-border-color); margin: 0 .15rem; }
/* le premier des deux clics de « Supprimer… » : le bouton se change en confirmation */
.ht-rowbtn.danger.armed { background: rgba(var(--ht-danger-rgb), .14); border-color: var(--ht-danger); color: var(--ht-danger); font-weight: 800; }

/* ── le panneau d'une action (dépôt, retrait, achat / vente, rééquilibrage, modifier) ── */
.pf-act { margin-bottom: .9rem; }          /* v2.74 : sans barre à gauche */
.pf-act .ht-card-h { margin-bottom: .6rem; }
.pf-arow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem; }
.pf-arow > div { min-width: 9rem; }
.pf-arow .ht-inp { min-width: 9rem; }
.pf-arow .pf-amk { min-width: 13rem; flex: 0 1 15rem; }
.pf-ainfo { flex: 1 1 14rem; font-size: .76rem; color: var(--ht-gray-700); align-self: center; padding-top: 1rem; }
.pf-ainfo b { color: var(--ht-heading-color); }
.pf-rsum { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .76rem; color: var(--ht-gray-700); }
.pf-rsum b { color: var(--ht-heading-color); }
.pf-wbox { border-color: rgba(var(--ht-warning-rgb), .45); background: rgba(var(--ht-warning-rgb), .08); color: var(--ht-gray-900); }

/* ── la courbe : la valeur et la référence ── */
.pf-chart { height: 270px; }
.pf-chart .pf-bl { fill: none; stroke: var(--ht-gray-500); stroke-width: 1.6; stroke-dasharray: 5 4; }
.pf-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .7rem; color: var(--ht-gray-700); }
.pf-lg { display: inline-block; width: .9rem; height: 2px; margin-right: .35rem; vertical-align: 3px; background: var(--ht-primary); }
.pf-lg.b { background: repeating-linear-gradient(90deg, var(--ht-gray-500) 0 4px, transparent 4px 7px); }
.pf-tip { position: absolute; pointer-events: none; min-width: 10rem; padding: .4rem .6rem; border-radius: .45rem; font-size: .72rem; line-height: 1.45;
  background: var(--ht-card-bg); border: 1px solid var(--ht-border-color); color: var(--ht-body-color); box-shadow: var(--ht-box-shadow); }
.pf-tip .k { color: var(--ht-gray-600); }
.pf-tip b { color: var(--ht-heading-color); margin-left: .3rem; }

/* ── les tableaux : lignes, cibles, journal ── */
.pf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: 0; }
.pf-dot.cash { background: var(--ht-gray-400); }
.pf-warn { color: var(--ht-warning); font-weight: 700; }
.ht-table td .ht-srcb { margin-left: .3rem; }
.ht-table td small { font-size: .68rem; opacity: .85; }
.pf-tgt .pf-tin { width: 6.5rem; margin-left: auto; }
.pf-tgt .pf-tin input { text-align: right; }
.pf-tadd { max-width: 18rem; }
.pf-ops tr.pf-armed > td { background: rgba(var(--ht-danger-rgb), .06); }
.pf-confirm { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }

/* ── le formulaire « Nouveau portfolio » ── */
.pf-form { border-top: 3px solid var(--ht-primary); }
.pf-frow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: .8rem; }
.pf-flh { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1rem 0 .5rem; padding-top: .8rem; border-top: 1px solid var(--ht-border-color); }
.pf-flines { display: flex; flex-direction: column; gap: .4rem; }
.pf-fline { display: grid; grid-template-columns: minmax(0, 14rem) 7.5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.pf-finfo { font-size: .74rem; color: var(--ht-gray-700); min-width: 0; }
.pf-fsum { margin-top: .7rem; font-size: .78rem; color: var(--ht-gray-700); }
.pf-fsum b { color: var(--ht-heading-color); }

/* ── v2.61 : les réglages (rééquilibrage automatique, frais), le journal calculé, la comparaison ── */
.pf .ht-pagehead .btn.active { border-color: rgba(var(--ht-primary-rgb), .5); color: var(--ht-primary); }
.pf-sets .pf-fee { min-width: 12.5rem; }
.pf-sets .pf-fee input { text-align: right; }
.pf-ops tr.pf-auto > td { background: rgba(var(--ht-info-rgb), .04); }
.pf-cmp { border-top: 3px solid var(--ht-primary); }
.pf-cpicks { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.pf-cpick { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; max-width: 16rem; padding: .2rem .65rem; border-radius: 1rem;
  border: 1px solid var(--ht-border-color); background: var(--ht-card-bg); color: var(--ht-gray-700); font-size: .74rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .12s, background .12s; }
.pf-cpick:hover { border-color: rgba(var(--ht-primary-rgb), .45); color: var(--ht-primary); }
.pf-cpick:focus-visible { outline: 2px solid var(--ht-primary); outline-offset: 2px; }
.pf-cpick.on { border-color: rgba(var(--ht-primary-rgb), .5); background: rgba(var(--ht-primary-rgb), .08); color: var(--ht-heading-color); }

/* ── v2.79 : le lien public — la pastille « public » d'une carte, le bouton de l'en-tête, le panneau (le lien, Copier, Ouvrir, Arrêter) ── */
.pf-cnm { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.pf-cnm .nm { min-width: 0; }
.pf-pub { flex: none; font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.55; padding: 0 .35rem;
  border-radius: .3rem; color: var(--ht-primary); background: rgba(var(--ht-primary-rgb), .12); }
.pf-acts .ht-rowbtn.pf-shared { color: var(--ht-primary); border-color: rgba(var(--ht-primary-rgb), .35); }
.pf-share-txt { font-size: .78rem; color: var(--ht-gray-700); margin: 0 0 .45rem; max-width: 52rem; }
.pf-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pf-share-url { flex: 1 1 22rem; width: auto; min-width: 0; font-family: var(--ht-font-monospace); font-size: .74rem; }

/* ── le choix d'un marché : un champ, et sa liste de propositions ── */
.pf-mk { position: relative; }
.pf-mk-in { padding-right: 2.4rem; }
.pf-mk-tag { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; }
.pf-mk-tag .ht-srcb { margin: 0; }
.pf-mk-list { position: absolute; z-index: 1050; left: 0; top: calc(100% + 2px); min-width: 100%; width: max-content; max-width: min(24rem, 90vw); max-height: 18rem;
  overflow-y: auto; padding: .25rem; border-radius: .55rem; background: var(--ht-card-bg); border: 1px solid var(--ht-border-color); box-shadow: var(--ht-box-shadow); }
.pf-mk-it { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  width: 100%; padding: .3rem .5rem; border-radius: .4rem; font-size: .76rem; color: var(--ht-body-color); }
.pf-mk-it .n b { color: var(--ht-heading-color); }
.pf-mk-it small { color: var(--ht-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .68rem; }
.pf-mk-it .p { color: var(--ht-gray-700); font-size: .7rem; }
.pf-mk-it:hover, .pf-mk-it.on { background: rgba(var(--ht-primary-rgb), .1); }
.pf-mk-none { padding: .45rem .55rem; font-size: .74rem; color: var(--ht-gray-600); }

/* ── écrans étroits : une colonne ── */
@media (max-width: 991.98px) {
  .pf-frow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .pf-fline { grid-template-columns: minmax(0, 1fr) 6.5rem auto; }
  .pf-fline .pf-finfo { grid-column: 1 / -1; order: 4; }
  .pf-acts { width: 100%; }
  .pf-sep { display: none; }
  .pf-chart { height: 210px; }
  .pf-arow > div, .pf-arow .pf-amk { flex: 1 1 100%; }
  .pf-ainfo { padding-top: 0; }
}
@media (max-width: 575.98px) {
  .pf-frow { grid-template-columns: minmax(0, 1fr); }
  .pf-cards { grid-template-columns: minmax(0, 1fr); }
}