/* Outil · Partager une dépense (Split costs), id partage : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pa-
   À gauche : le total en grand, puis les virements pour être quittes (ou la répartition par poste) dans une zone de
   hauteur fixe qui défile ; l'info ; Copier. À droite : Entre amis / Par postes, puis, dans une zone de hauteur fixe,
   les personnes (noms modifiables) et les dépenses (quoi, montant, payé par, pour qui), ou le montant et les postes. */
.pa .outil-fixe { align-items: stretch; }
.pa-carte { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 6px 18px 10px; }
.pa-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 74px; border-bottom: 1px solid var(--filet-doux); }
.pa-grand span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); white-space: nowrap; }
.pa-grand b { font: 700 clamp(26px, 7.5vw, 34px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--peche); white-space: nowrap; }
.pa-resultats { height: 270px; display: flex; flex-direction: column; }
.pa-rangee { cursor: default; height: 44px; align-items: center; }
.pa-rangee:hover .nom { color: var(--papier); }
.pa-virements { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.pa-postes-res { padding-top: 10px; }
.pa-virement { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 10px; background: rgba(242, 240, 235, .05); }
.pa-virement span { font: 500 14px/1.3 var(--corps); color: var(--papier); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-virement i { font: 500 11px/1 var(--mono); font-style: normal; color: var(--texte2); }
.pa-virement b { font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--peche); }
.pa-quitte { margin: 30px 0; text-align: center; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.pa-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.pa-info.pa-alerte { color: var(--peche); }
.pa-actions { display: flex; justify-content: center; }
.pa-actions .pastille { cursor: pointer; }
.pa-actions .pastille:hover { translate: none; }

.pa-zone { min-height: 560px; }
.pa-bloc { display: none; flex-direction: column; gap: 14px; }
.pa[data-mode="amis"] [data-bloc="amis"], .pa[data-mode="postes"] [data-bloc="postes"] { display: flex; }
.pa-personnes { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; height: 84px; overflow-y: auto; }   /* deux lignes de noms, puis défile */
.pa-personne { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 4px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); }
.pa-nom { width: 9ch; border: 0; outline: none; background: none; color: var(--papier); font: 500 14px/1 var(--corps); }
.pa-plus { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: none; box-shadow: inset 0 0 0 1px var(--filet); color: var(--papier); }
.pa-plus svg, .pa-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pa-x { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.pa-x:hover { color: var(--papier); }
.pa-x:disabled { opacity: .25; cursor: default; }
.pa-liste { height: 300px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pa-depense, .pa-poste { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 110px 28px; gap: 8px 10px; align-items: center; padding: 10px 8px 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.pa-quoi { min-width: 0; height: 36px; border: 0; outline: none; background: none; color: var(--papier); font: 500 14.5px/1 var(--corps); }
.pa-montant { position: relative; display: block; }
.pa-montant input { width: 100%; height: 36px; border: 0; outline: none; border-radius: 10px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); padding: 0 24px 0 8px;
  text-align: right; color: var(--papier); font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pa-montant input:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.pa-montant i { position: absolute; right: 9px; top: 50%; translate: 0 -50%; font: 500 11px/1 var(--mono); font-style: normal; color: var(--texte2); pointer-events: none; }
.pa-qui { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-qui span { font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--texte2); width: 6.5em; }
.pa-puce { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--filet); color: var(--texte2); font: 500 12px/1 var(--corps); }
.pa-puce[aria-pressed="true"] { background: var(--papier); color: var(--noir); box-shadow: none; }
.pa-pour[aria-pressed="false"] { opacity: .5; }
.pa-ajout { cursor: pointer; }
.pa-ajout:hover { translate: none; }
.pa-deux { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: end; }
@media (max-width: 959px) { .pa-onglets, .pa-zone { order: -1; } }