/* Comptes et finances : styles propres à ces deux écrans. Le système commun est dans styles.css.
   Aucune couleur en dur : uniquement les variables du thème. Les couleurs de statut (rouge, ambre, vert) ne servent
   qu'aux problèmes, aux points d'attention et aux confirmations, toujours doublées d'un libellé ou d'une icône. */

/* ───────── Communs aux deux écrans ───────── */
.sur-mobile, .sous-mvt.sur-mobile { display: none; }
a.filtre:hover { text-decoration: none; }
button.kpi { width: 100%; text-align: left; cursor: pointer; }
.bloc-verif { margin-bottom: 14px; }
.legende-etats { margin: 10px 2px 0; max-width: 940px; font-size: 12.5px; line-height: 1.5; color: var(--encre-3); }
.legende-etats b { color: var(--encre-2); font-weight: 600; }
.note-page { margin-top: 10px; font-size: 12.5px; color: var(--encre-3); }
.section-fin { margin-top: 18px; }
.pastille-compte { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--surface); }
.pastille-compte.gd { width: 44px; height: 44px; border-radius: 12px; }
.pastille-compte.gd .ic { width: 22px; height: 22px; }

/* ───────── Tableau des mouvements ───────── */
.lien-mvt { padding: 0; border: 0; background: none; text-align: left; font-weight: 600; color: var(--encre); }
.lien-mvt:hover { color: var(--bleu-600); text-decoration: underline; text-underline-offset: 2px; }
.sous-mvt { display: block; margin-top: 1px; font-size: 12px; color: var(--encre-3); }
.tableau-mvt td b { font-weight: 600; }
.tableau-mvt td.mvt-entree b { font-weight: 680; }
.tableau-mvt td.mvt-sortie b { font-weight: 500; }
.tableau-marges th { white-space: normal; }
.tableau-mvt tr.mvt-attente .lien-mvt { color: var(--encre-2); }
.sous-cell { display: block; font-size: 11.5px; font-weight: 500; color: var(--encre-3); }
.sous-cell.negatif { color: var(--t-rouge); }
.resume-journal { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--bord); border-radius: var(--rayon) var(--rayon) 0 0; background: var(--surface-2); font-size: 13px; color: var(--encre-2); }
.resume-journal b { color: var(--encre); font-weight: 600; }
.select-filtre { width: auto; max-width: 280px; height: 36px; }
.filtres-fin .champ-recherche { max-width: 340px; }
.filtres.filtres-carte { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--bord); }
.ligne-ouverture { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--bord); background: var(--surface-2); font-size: 13px; color: var(--encre-2); }
.ligne-ouverture span { display: inline-flex; align-items: center; gap: 6px; }

/* ───────── Détail et saisie d'un mouvement ───────── */
.totaux-mvt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.totaux-mvt > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 13px; border: 1px solid var(--bord); border-radius: 11px; background: var(--surface-2); }
.totaux-mvt span { font-size: 11.5px; font-weight: 600; color: var(--encre-3); }
.totaux-mvt b { font-family: var(--police-titre); font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.note-mvt { font-size: 12.5px; color: var(--encre-3); }
.apercu-mvt { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 11px; background: var(--surface-2); font-size: 13.5px; }
.apercu-mvt:empty { display: none; }
.apercu-mvt .ligne { display: flex; justify-content: space-between; gap: 12px; }
.apercu-mvt .ligne > span:first-child { color: var(--encre-2); }
.apercu-mvt .muet, .apercu-mvt .negatif { font-size: 12.5px; }

/* ───────── Finances : période et indicateurs ───────── */
.barre-periode { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.periode { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--bord); border-radius: 11px; background: var(--surface); box-shadow: var(--ombre-1); }
.periode select.entree { width: auto; min-width: 172px; height: 30px; border-color: transparent; background-color: transparent; font-weight: 600; }
.aide-periode { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--encre-3); }
.aide-periode .ic { flex: none; }
.fin-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.fin-kpis .kpi-val { font-size: 23px; }

/* ───────── Finances : d'où vient le solde, répartition ───────── */
.flux { display: flex; flex-direction: column; }
.flux-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); font-size: 14px; }
.flux-ligne:first-child { padding-top: 2px; border-top: 0; }
.flux-lib { flex: 1; min-width: 0; font-weight: 550; }
.flux-ligne b { font-size: 15px; font-weight: 620; white-space: nowrap; }
.flux-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--fond-2); color: var(--encre-2); }
.flux-sous { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0 2px 42px; font-size: 12.5px; color: var(--encre-2); }
.flux-sous + .flux-ligne { margin-top: 8px; }
.flux-ligne.total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--bord-fort); }
.flux-ligne.total .flux-lib { font-weight: 650; }
.flux-ligne.total b { font-family: var(--police-titre); font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.flux-note { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--encre-3); }
.repartition { display: flex; flex-direction: column; gap: 16px; }
.rep-ligne { display: flex; flex-direction: column; gap: 6px; }
.rep-tete { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.rep-tete > span:first-child { flex: 1; min-width: 0; font-weight: 550; }
.rep-tete b { font-weight: 620; }
.rep-ligne small { font-size: 12px; }

/* ───────── Finances : à vérifier ───────── */
.element-mvt { align-items: center; }
.element-mvt .element-droite { gap: 12px; }
.ic-mvt { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--t-ambre-f); color: var(--t-ambre); }
.montant-verif { font-size: 14.5px; font-weight: 620; white-space: nowrap; }

/* ───────── Comptes : les quatre états de l'argent ───────── */
.etats-argent { overflow: hidden; }
.etats-argent .etat-argent { gap: 5px; }
.etats-argent .kpi-lien:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.etat-argent .kpi-lib .ic { color: var(--encre-3); }
.etat-argent .phrase { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--encre-2); }

/* ───────── Comptes : cartes des comptes, vendeurs ───────── */
.genre-compte { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.compte-tuile .haut .tronque { line-height: 1.25; }
.compte-tuile .ligne-confirme { display: inline-flex; align-items: center; gap: 5px; margin-top: -4px; font-size: 12px; font-weight: 550; color: var(--t-vert); }
.compte-tuile .attente { color: var(--t-ambre); }
.compte-tuile .pied-compte { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: 12px; color: var(--encre-3); }
.compte-tuile .pied-compte b { font-weight: 600; color: var(--encre); }
.element-vendeur { align-items: center; }
.somme-vendeur { flex-direction: column; align-items: flex-end; gap: 0; }
.somme-vendeur b { font-size: 15px; font-weight: 620; }
.somme-vendeur small { font-size: 11.5px; color: var(--encre-3); }

/* ───────── Fiche d'un compte ───────── */
.tete-compte { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kpis-compte { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 14px; }
.kpis-compte.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.compte-fiche { margin-top: 18px; }
.pointage, .pointage-form { display: flex; flex-direction: column; gap: 12px; }
.choix-ecart { grid-template-columns: minmax(0, 1fr); }
.choix-ecart .choix-carte { align-items: flex-start; }
.choix-ecart .choix-carte::before { content: ""; width: 16px; height: 16px; margin-top: 2px; border: 1.75px solid var(--bord-fort); border-radius: 50%; flex: none; background: var(--surface); }
.choix-ecart .choix-carte:has(input:checked)::before { border-color: var(--bleu-600); background: var(--bleu-600); box-shadow: inset 0 0 0 3px var(--surface); }
.choix-ecart .choix-carte > span { display: flex; flex-direction: column; gap: 2px; }
.choix-ecart .choix-carte small { font-size: 12px; font-weight: 500; color: var(--encre-2); }
.comptages { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid var(--bord); }
.comptage { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 12.5px; }
.comptage > span:first-child { flex: 1; min-width: 130px; }

/* ───────── V5 · carte Montants de la fiche commande ───────── */
.montants .rg > span:first-child small { color: var(--encre-2); line-height: 1.4; margin-top: 2px; }
.montants .rg > b, .montants .rg > .arg-val { text-align: right; white-space: nowrap; flex: none; }
.montants .rg > .arg-val { font-size: 14px; }
.montants .rg > span:first-child { flex: 1; }
.arg-rg-bouton { border-top: 0; padding: 2px 0 12px; }
.arg-ajouter { height: 44px; font-weight: 650; border-color: var(--bord-fort); }
.arg-sous-titre { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--ligne); font-size: 12.5px; font-weight: 650; color: var(--encre-3); }
.arg-sous-titre + .rg, .arg-sous-titre + .cde-mvt > li:first-child { border-top: 0; }
.arg-paiements > .cde-petit { margin: 6px 0 10px; }
.arg-boutique { margin-top: 4px; }
.montants .arg-mvt li { align-items: flex-start; gap: 10px; }
.montants .arg-mvt li > div { flex: 1; min-width: 0; }
.arg-mvt-montant { font-weight: 650; white-space: nowrap; }
.arg-gestes { display: flex; gap: 14px; margin-top: 2px; font-size: 13.5px; }
.arg-mvt li.arg-annule .arg-mvt-montant, .arg-mvt li.arg-annule b { text-decoration: line-through; color: var(--encre-3); font-weight: 500; }
.arg-a-faire { font-weight: 650; }
.arg-hors-comptes, .arg-non-suivi { font-weight: 550; font-size: 13.5px; white-space: normal; text-align: right; }
.arg-contradictions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.arg-contradiction { padding: 10px 12px; border: 1px solid var(--bord-fort); border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.arg-contradiction p { margin: 0; }
.arg-corrections { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.arg-corrections:empty { display: none; }

/* ───────── V5 · fenêtres d'argent (retour du montant boutique, paiement, annulation) ───────── */
.arg-recap { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: 11px; background: var(--surface-2); padding: 4px 13px; margin-bottom: 14px; }
.arg-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--encre-2); }
.arg-ligne + .arg-ligne { border-top: 1px solid var(--ligne); }
.arg-ligne b { color: var(--encre); font-weight: 600; white-space: nowrap; }
.arg-ligne.fort { color: var(--encre); font-weight: 600; }
.arg-ligne.fort b { font-size: 16px; font-weight: 680; }
.arg-probleme { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px; margin-bottom: 14px; border: 1px solid var(--t-rouge); border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.arg-probleme[hidden] { display: none; }
.arg-probleme b { color: var(--t-rouge); font-weight: 650; }
.arg-probleme .case { margin-top: 2px; }
.arg-note { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--encre-2); }
.arg-hors p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; }
.arg-date { display: flex; align-items: center; gap: 10px; }
.arg-date input { flex: 1; min-width: 0; }
.arg-date .lien { flex: none; white-space: nowrap; }
.arg-sans-compte { margin: 0; padding: 9px 11px; border: 1px dashed var(--bord-fort); border-radius: 9px; font-size: 13.5px; line-height: 1.45; }
.arg-nouveau-client { margin-top: 8px; }
.arg-nouveau-client[hidden] { display: none; }
.arg-champs { margin-top: 14px; }
.modale-pied .btn[data-retour-choix] { white-space: nowrap; }
@media (min-width: 761px) { .modale[data-modale="retour-boutique"] { max-width: 740px; } }

/* ───────── V5 · Finances : capital, à rapprocher, résultat par commande ───────── */
.fin-capital .carte-corps { display: flex; flex-direction: column; }
.fin-poste { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); font-size: 14px; color: inherit; }
.fin-poste:first-child { border-top: 0; padding-top: 2px; }
a.fin-poste:hover { text-decoration: none; }
a.fin-poste:hover .fin-poste-lib b { text-decoration: underline; text-underline-offset: 2px; }
.fin-poste-lib { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fin-poste-lib b { font-weight: 600; }
.fin-poste-lib small { font-size: 12.5px; color: var(--encre-3); line-height: 1.4; }
.fin-poste > b { font-size: 15px; font-weight: 620; white-space: nowrap; }
.fin-poste.total { border-top: 1px solid var(--bord-fort); }
.fin-rapp { margin-bottom: 18px; }
.fin-rapp > summary { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 13px 16px; cursor: pointer; list-style: none; }
.fin-rapp > summary::-webkit-details-marker { display: none; }
.fin-rapp > summary h2 { margin: 0; font-size: 15px; }
.fin-rapp > summary .sous { color: var(--encre-2); font-size: 13.5px; flex: 1; min-width: 180px; }
.fin-rapp > summary .lien { flex: none; }
.fin-rapp-corps { border-top: 1px solid var(--bord); }
.fin-rapp-outils { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--bord); }
.fin-rapp-outils .champ-recherche { flex: 1 1 220px; max-width: 320px; }
.fin-rapp-actions { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--bord); background: var(--surface-2); font-size: 13.5px; }
.fin-rapp-actions .espace { flex: 1; }
.fin-rapp-ligne { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 16px; border-top: 1px solid var(--ligne); font-size: 14px; }
.fin-rapp-ligne:first-child { border-top: 0; }
.fin-rapp-ligne input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--encre); }
.fin-rapp-qui { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-rapp-qui > button { padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.fin-rapp-qui > button:hover b { text-decoration: underline; text-underline-offset: 2px; }
.fin-rapp-qui small { font-size: 12.5px; color: var(--encre-2); line-height: 1.4; }
.fin-rapp-montant { text-align: right; white-space: nowrap; }
.fin-rapp-montant b { font-weight: 650; }
.fin-rapp-montant small { display: block; font-size: 11.5px; color: var(--encre-3); }
.fin-contra { margin-bottom: 18px; }
.fin-contra .element { align-items: flex-start; }
.resultat-libelle { font-size: 12.5px; font-weight: 550; color: var(--encre-2); white-space: normal; }
.legende-etats a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ───────── Tablette ───────── */
@media (max-width: 1240px) {
  .fin-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fin-kpis > * { grid-column: span 2; }
  .fin-kpis > :nth-child(-n+2) { grid-column: span 3; }
  .kpis-compte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  /* Une seule colonne : les informations et le pointage passent avant le long journal. */
  .compte-fiche .cote-compte { order: -1; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .compte-fiche .cote-compte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ───────── Téléphone ───────── */
@media (max-width: 760px) {
  .sur-mobile, .sous-mvt.sur-mobile { display: block; }
  .sur-ordi, .sous-mvt.sur-ordi { display: none; }
  .legende-etats { font-size: 12px; }

  /* Période : pleine largeur, zones tactiles confortables */
  .barre-periode { gap: 8px; margin-bottom: 12px; }
  .periode { width: 100%; }
  .periode select.entree { flex: 1; min-width: 0; height: 40px; font-size: 16px; }
  .periode .btn-icone.sm { width: 40px; height: 40px; }
  .aide-periode { align-items: flex-start; font-size: 12px; }

  /* Indicateurs : le solde en tête sur toute la largeur, puis deux par ligne */
  .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .fin-kpis > *, .fin-kpis > :nth-child(-n+2) { grid-column: auto; }
  .fin-kpis > .accent { grid-column: 1 / -1; }
  .fin-kpis .kpi-val { font-size: 19px; }
  .fin-kpis .accent .kpi-val { font-size: 26px; }
  .fin-kpis .kpi-detail { font-size: 12px; }

  /* Filtres : ils passent à la ligne au lieu de défiler hors de l'écran */
  .filtres.filtres-fin { flex-wrap: wrap; overflow: visible; margin: 0 0 12px; padding: 0; }
  .filtres-fin .champ-recherche { order: -1; max-width: none; }
  .filtres-fin .select-filtre { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; height: 44px; font-size: 16px; }
  .filtres-fin .espace { display: none; }
  .filtres-fin > .btn { flex: 1 1 100%; }
  .filtres.filtres-carte { flex-wrap: wrap; overflow: visible; margin: 0; padding: 10px 14px; }
  .filtres-carte .segment { width: 100%; }
  .filtres-carte .segment button { flex: 1; justify-content: center; height: 36px; padding: 0 6px; }

  /* Journal : chaque mouvement devient une carte (libellé à gauche, montant à droite) */
  .resume-journal { gap: 4px 14px; padding: 10px 14px; font-size: 12.5px; }
  .tableau-cadre.cartes-mobile .tableau-mvt tr, .tableau-cadre.cartes-mobile .tableau-marges tr { align-items: center; }
  .tableau-mvt .lien-mvt { font-size: 15px; }
  .tableau-marges .sur-mobile { margin-top: 4px; white-space: normal; line-height: 1.4; }
  .ligne-ouverture { padding: 11px 14px; }
  .flux-ligne b { font-size: 14.5px; }
  .flux-sous { padding-left: 0; }
  .element-mvt { flex-wrap: wrap; }
  .element-mvt .element-droite { width: 100%; justify-content: space-between; padding-left: 42px; }
  .totaux-mvt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .totaux-mvt > div:first-child { grid-column: 1 / -1; }

  /* V5 : fenêtres d'argent et bloc « à rapprocher » */
  .arg-date { flex-wrap: wrap; }
  .arg-date input { flex: 1 1 100%; height: 44px; font-size: 16px; }
  .arg-probleme .case span, .arg-probleme span { overflow-wrap: anywhere; }
  /* Les trois choix de la fenêtre de retour, l'un sous l'autre : le principal d'abord, chacun sur toute la largeur. */
  .modale[data-modale="retour-boutique"] .modale-pied { flex-direction: column-reverse; flex-wrap: nowrap; }
  .modale[data-modale="retour-boutique"] .modale-pied .btn, .modale[data-modale="retour-boutique"] .modale-pied .btn.gauche { flex: none; width: 100%; margin: 0; white-space: normal; }
  .fin-rapp > summary { padding: 12px 14px; }
  .fin-rapp-outils, .fin-rapp-actions { padding: 10px 14px; }
  .fin-rapp-outils .champ-recherche { max-width: none; flex-basis: 100%; }
  .fin-rapp-ligne { padding: 10px 14px; grid-template-columns: 26px minmax(0, 1fr); }
  .fin-rapp-montant { grid-column: 2; text-align: left; }
  .fin-rapp-montant small { display: inline; margin-left: 6px; }
  .fin-rapp-actions .btn { flex: 1 1 100%; }

  /* Les quatre états : une ligne par état, le montant à droite */
  .etats-argent { grid-template-columns: minmax(0, 1fr); }
  .etats-argent .kpi + .kpi { border-left: 0; border-top: 1px solid var(--bord); }
  .etats-argent .etat-argent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; }
  .etat-argent .kpi-lib, .etat-argent .kpi-detail, .etat-argent .phrase { grid-column: 1; }
  .etat-argent .kpi-val { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; font-size: 20px; }

  /* Comptes : une carte par ligne, lisible d'un coup d'œil */
  .comptes-grille.comptes-pleine { grid-template-columns: minmax(0, 1fr); }
  .pied-vendeurs { flex-wrap: wrap; }
  .tete-compte { gap: 12px; }
  .kpis-compte, .kpis-compte.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; }
  .kpis-compte > .accent { grid-column: 1 / -1; }
  .kpis-compte.deux > * { grid-column: 1 / -1; }
  .compte-fiche { margin-top: 12px; }
}

/* Une valeur en toutes lettres (« non suivi dans les comptes ») : le libellé et sa note gardent toute la largeur de la
   carte, la valeur passe dessous, au lieu d'écraser la note en une colonne d'un mot. */
.montants .rg:has(> .arg-non-suivi) { flex-wrap: wrap; row-gap: 4px; }
.montants .rg:has(> .arg-non-suivi) > span:first-child { flex: 1 1 100%; }
.montants .rg > .arg-non-suivi { margin-left: auto; text-align: right; }

/* ───────── Lot 6 — responsable d'un compte, participation, transferts en deux temps ───────── */
.compte-tuile .ligne-responsable { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--encre-2); }
.resp-compte { display: inline-flex; align-items: center; gap: 5px; color: var(--encre); font-weight: 600; }
.compte-tuile .participation { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-transferts { margin-bottom: 18px; }
.transferts .transfert { align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.transferts .transfert .element-corps { flex: 1 1 200px; min-width: 0; }
.transferts .transfert .element-titre { overflow-wrap: anywhere; }
.transferts .transfert.etat-annule .element-titre, .transferts .transfert.etat-annule .tab { text-decoration: line-through; color: var(--encre-2); }
.transferts .element-droite { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.transfert-gestes { display: inline-flex; align-items: center; gap: 10px; }
.histo-compte { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ligne); }
.histo-compte .comptage { display: block; padding: 5px 0; font-size: 13px; }