/* Le Portefeuille : la liste des biens suivis.
   Extrait tel quel de index.html (découpage du front). */

/* LE PORTEFEUILLE. Une ligne par bien, les mêmes colonnes pour tous : c'est
   la comparabilité qui fait l'écran. Les nombres en chiffres tabulaires pour
   qu'ils s'alignent d'une ligne à l'autre. */
.pf-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-creer { margin-left: auto; height: 44px; padding: 0 16px 0 12px; font-weight: 600; font-size: 14px; }
.pf-vide-actions .pf-creer { margin-left: 0; }
.pf-creer-plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 20%, transparent); font-size: 16px; line-height: 1; }
.pf-table { overflow-x: auto; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; }
.pf-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th { text-align: left; font-size: 12px; font-weight: 600;
  color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.pf-table td { padding: 12px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-table th.pf-nombre { text-align: right; }
.pf-nombre[data-negatif] { color: var(--veille-hausse); font-weight: 600; }
.pf-coche { width: 34px; }
.pf-comparer-cible { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.pf-comparer-cible input { width: 20px; height: 20px; cursor: pointer; }
.pf-nom button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: inherit; cursor: pointer; text-align: left; }
.pf-nom button:hover { text-decoration: underline; }
.pf-nom button { min-height: 44px; line-height: 1.4; color: var(--ink); }
.pf-contexte { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--ink-3); white-space: normal; }
.pf-action { font-size: 13px; color: var(--ink-2); }
.pf-etape { white-space: nowrap; }
.pf-brouillon { border-style: dashed; cursor: help; }
/* Une annonce retirée garde son dossier : la ligne le dit, sinon le fil
   annonçait un retrait qu'on ne retrouvait pas dans la liste. */
.pf-retiree { display: block; width: fit-content; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.pf-alerte { font-size: 12px; color: var(--veille-hausse); font-weight: 600; }
.pf-vide { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 28px; text-align: center; }
.pf-vide-titre { font-size: 16px; font-weight: 600; color: var(--ink); }
.pf-vide-texte { font-size: 14px; color: var(--ink-3); margin: 8px auto 16px; max-width: 34rem; }
.pf-vide-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* TRIER SES DOSSIERS SUR SES PROPRES CHIFFRES : ce que « Mes dossiers »
   savait faire et que la recherche ne peut pas, puisqu'elle trie sur
   l'estimation du catalogue. */
.pf-triable { cursor: pointer; user-select: none; }
.pf-triable:hover, .pf-triable.actif { color: var(--ink); }
.pf-triable button { border: 0; background: none; color: inherit; font: inherit; text-align: inherit; padding: 4px 0; min-height: 44px; cursor: pointer; }
.pf-retirer { width: 44px; text-align: right; }
.pf-actions { position: relative; }
.pf-actions summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 24px; list-style: none; }
.pf-actions summary::-webkit-details-marker { display: none; }
.pf-actions-menu { position: relative; display: grid; gap: 4px; margin-top: 8px; min-width: 9rem; text-align: left; }
.pf-actions-menu button { border: 0; border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; min-height: 44px; padding: 8px 12px; cursor: pointer; text-align: left; }
.pf-actions-menu [data-pf-supprimer] { color: var(--cashflow-negative); }
.pf-erreur { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--cashflow-negative); border-radius: 12px; background: var(--surface); color: var(--cashflow-negative); font-size: 14px; }
.pf-chiffres-erreur { display: block; max-width: 11rem; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--cashflow-negative); line-height: 1.4; white-space: normal; }
.pf-tris { display: none; }
html[data-theme="dark"] .pf-table,
html[data-theme="dark"] .pf-vide { background: var(--surface) !important; border-color: var(--hairline) !important; }
html[data-theme="dark"] .pf-table td { color: var(--ink-2) !important; border-color: var(--hairline); }
html[data-theme="dark"] .pf-table th { border-color: var(--hairline); }
html[data-theme="dark"] .pf-vide-titre { color: var(--ink) !important; }
html[data-theme="dark"] .pf-triable:hover,
html[data-theme="dark"] .pf-triable.actif { color: var(--ink) !important; }

/* QUOI DE NEUF ?! Le fil des événements sur les biens du portefeuille, à la
   manière d'un fil d'actualité : un avatar (le type de bien, marqué du sens de
   l'événement), qui et quand, le fait, puis les gestes. Les nouveautés sont
   teintées et pointées ; les événements déjà lus restent, sans teinte.
   À côté de la liste sur grand écran, au-dessus sur petit. */
:root { --fil-accent: #2563eb; --fil-avatar: #f1f5f9; }
html[data-theme="dark"] { --fil-accent: #60a5fa; --fil-avatar: #1f2937; }
/* minmax(0, …) : sans lui, la colonne s'élargit à la largeur du tableau au
   lieu de le laisser défiler dans son cadre, et la page déborde sur téléphone. */
.pf-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.pf-grille > #portefeuille-veille { order: 0; }
.pf-fil-resume { border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); overflow: hidden; }
.pf-fil-resume > summary { padding: 14px 16px; min-height: 48px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pf-fil-resume > div { border-top: 1px solid var(--hairline); }
.pf-fil-resume .fil { border: 0; border-radius: 0; }
.pf-fil-resume .alertes { border-width: 1px 0 0; border-radius: 0; margin-top: 0; }
@media (min-width: 1200px) {
  .pf-grille { grid-template-columns: minmax(0, 1fr) 380px; }
  .pf-grille > #portefeuille-veille { order: 0; }
}
.fil { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.fil-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.fil-titre { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 0; white-space: nowrap; }
.fil-compte { background: var(--fil-accent); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
html[data-theme="dark"] .fil-compte { color: #0f172a; }
.fil-tout-lu { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--fil-accent);
  background: none; border: 0; padding: 4px 6px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.fil-tout-lu:hover { background: color-mix(in srgb, var(--fil-accent) 10%, transparent); }
.fil-flux { list-style: none; margin: 0; padding: 0; }
.fil-carte { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); transition: background .15s; }
.fil-carte:last-child { border-bottom: 0; }
.fil-carte:hover { background: var(--surface-2); }
.fil-carte--nouveau { background: color-mix(in srgb, var(--fil-accent) 6%, var(--surface)); }
.fil-carte--nouveau:hover { background: color-mix(in srgb, var(--fil-accent) 10%, var(--surface)); }
.fil-avatar { position: relative; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--fil-avatar);
  display: grid; place-items: center; font-size: 22px; line-height: 1; }
/* Le sens de l'événement, en médaillon sur l'avatar : on lit le fil d'un
   coup d'œil, avant même le texte. */
.fil-avatar::after { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.fil-avatar--baisse::after { content: '↓'; background: var(--veille-baisse); }
.fil-avatar--hausse::after { content: '↑'; background: var(--veille-hausse); }
.fil-avatar--retrait::after { content: '⊘'; background: var(--ink-3); }
.fil-avatar--afaire::after { content: '!'; background: #d97706; }
.fil-carte--afaire { background: color-mix(in srgb, #f59e0b 7%, var(--surface)); }
.fil-carte--afaire:hover { background: color-mix(in srgb, #f59e0b 11%, var(--surface)); }
.fil-quand--retard { color: var(--veille-hausse); font-weight: 600; }
.fil-etiquette { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b45309; margin-right: 4px; }
html[data-theme="dark"] .fil-etiquette { color: #fcd34d; }
html[data-theme="dark"] .fil-avatar::after { color: #0f172a; }
.fil-corps { flex: 1 1 auto; min-width: 0; }
.fil-auteur { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fil-nom { font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.fil-nom:hover { text-decoration: underline; }
.fil-quand { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.fil-quand::before { content: '· '; }
.fil-point { width: 9px; height: 9px; border-radius: 50%; background: var(--fil-accent); margin-left: auto; align-self: flex-start; margin-top: 5px; flex: 0 0 auto; }
.fil-texte { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.fil-texte strong { color: var(--ink); }
.fil-media { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 10px 12px;
  border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); font-variant-numeric: tabular-nums; }
.fil-avant { font-size: 13px; color: var(--ink-3); text-decoration: line-through; }
.fil-apres { font-size: 16px; color: var(--ink); }
.fil-part { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.fil-media--baisse .fil-part { color: var(--veille-baisse); background: color-mix(in srgb, var(--veille-baisse) 12%, transparent); }
.fil-media--hausse .fil-part { color: var(--veille-hausse); background: color-mix(in srgb, var(--veille-hausse) 12%, transparent); }
.fil-gestes { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 -10px; }
.fil-geste { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); background: none; border: 0;
  border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.fil-geste:hover, .fil-geste:focus-visible { color: var(--fil-accent); background: color-mix(in srgb, var(--fil-accent) 10%, transparent); }
.fil-plus { display: block; width: 100%; padding: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--fil-accent);
  background: none; border: 0; border-top: 1px solid var(--hairline); cursor: pointer; }
.fil-plus:hover { background: var(--surface-2); }
.fil-vide { margin: 0; padding: 28px 16px; text-align: center; font-size: 14px; color: var(--ink-3); }

/* Le compteur de nouveautés sur l'onglet Portefeuille. */
.ws-pastille { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.ws-pastille[hidden] { display: none; }

/* LA COMPARAISON, sous la liste : le même cadre que la liste, qu'on referme. */
.pf-colonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.pf-comparaison-aide { font-size: 12px; color: var(--ink-3); }
.pf-fermer { margin-left: auto; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 6px; min-width: 44px; min-height: 44px; }
.pf-fermer:hover { color: var(--ink); }
.pf-comparaison-bien { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13px; }
.pf-comparaison-bien:hover { text-decoration: underline; }
.pf-comparaison-retirer { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 18px; padding: 0 2px; margin-left: 4px; min-width: 44px; min-height: 44px; }
.pf-comparaison-retirer:hover { color: var(--veille-hausse); }
/* Le tableau comparatif : des intertitres par famille, comme les onglets du
   dossier ; les lignes de total en gras ; la meilleure valeur d'une ligne en
   vert, quand la comparer a un sens. La colonne des libellés reste visible
   quand le tableau défile sur téléphone. */
.pf-cmp td:first-child, .pf-cmp th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.pf-cmp tr.pf-cmp-groupe th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); background: var(--surface-2); padding: 8px 12px; text-align: left; }
.pf-cmp tr.pf-cmp-total td { font-weight: 700; color: var(--ink); }
.pf-cmp td.pf-meilleur { color: var(--veille-baisse); font-weight: 700; }
.pf-cmp td.pf-meilleur::after { content: ' ✓'; font-size: 11px; }

/* Chaque bien conserve ses chiffres et ses actions dans la largeur du téléphone.
   Le comparateur reste un tableau, avec sa colonne de critères fixe. */
@media (max-width: 760px) {
  .pf-entete .barre-intitule { flex: 1 1 auto; font-size: 14px; text-transform: none; letter-spacing: 0; }
  .pf-entete .pf-creer { width: 100%; margin-left: 0; justify-content: center; }
  .pf-tris { display: block; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
  .pf-tris > summary { min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); cursor: pointer; }
  .pf-tris > div { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
  .pf-tris button { min-height: 44px; padding: 8px 12px; font: inherit; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
  .pf-tris button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
  .pf-liste { overflow: visible; background: none; border: 0; border-radius: 0; }
  .pf-liste table, .pf-liste tbody { display: block; width: 100%; }
  .pf-liste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pf-liste thead button { visibility: hidden; }
  .pf-liste tbody { display: grid; gap: 12px; }
  .pf-liste tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); }
  .pf-liste td { min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  .pf-liste td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
  .pf-liste .pf-coche { position: absolute; top: 18px; left: 10px; width: 36px; height: 44px; display: grid; place-items: center; }
  .pf-liste .pf-nom { grid-column: 1 / -1; padding-left: 30px; order: 0; }
  .pf-liste .pf-nom button { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
  .pf-liste .pf-etape { order: 1; align-self: end; }
  .pf-liste .pf-cashflow { order: 2; font-size: 18px; font-weight: 700; }
  .pf-liste .pf-capital { order: 3; }
  .pf-liste .pf-rendement { order: 4; }
  .pf-liste .pf-suite { order: 5; align-self: center; }
  .pf-liste .pf-retirer { order: 6; width: auto; justify-self: end; }
  .pf-liste .pf-actions-menu { min-width: 0; max-width: 9rem; }
  .pf-cmp { max-width: 100%; }
  .pf-cmp th:not(:first-child), .pf-cmp td:not(:first-child) { min-width: 12rem; }
  .pf-cmp td:first-child, .pf-cmp th:first-child { max-width: 9rem; white-space: normal; }
}

/* Les alertes par zone : dans le fil, et leur encadré sous le fil. */
.fil-avatar--alerte::after { content: '★'; background: var(--insigne-or); }
.fil-media--alerte strong { color: var(--veille-baisse); }
.alertes { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.alertes-titre { font-size: 14px; font-weight: 700; color: var(--ink); }
.alertes-texte { font-size: 13px; color: var(--ink-2); margin: 6px 0; }
.alertes-zones { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.alertes-zone { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--insigne-or) 18%, transparent); color: var(--ink); }
.alertes-zone button { border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.alertes-ajout { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; font-size: 13px; color: var(--ink-2); }
.alertes-ajout label { display: grid; gap: 4px; }
.alertes-ajout input { width: 5rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); text-transform: uppercase; }