/* ==========================================================================
   Dossier de recouvrement — volet d'action du chargé de recouvrement.
   Complète sherpa-dashboard.css (kpi-card, aging-badge, chip, section-head)
   sans le redéfinir : seules les briques propres au dossier vivent ici.
   ========================================================================== */

/* ---------- Volet latéral ---------- */

.dossier-sidebar {
	width: min(880px, 96vw) !important;
	padding: 0 !important;
}

.dossier-sidebar .ui-sidebar-content {
	padding: 1.25rem 1.5rem 2rem;
}

/* ---------- En-tête du dossier ---------- */

.dossier-head {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--surface-border, #e3e8ef);
}

.dossier-head__name {
	margin: 0 0 .2rem;
	font-size: 1.15rem;
	font-weight: 700;
}

.dossier-head__meta {
	display: block;
	font-size: .78rem;
	color: #64748b;
}

.dossier-head__meta i {
	margin-right: .25rem;
}

.dossier-head__figures {
	display: flex;
	gap: 1.5rem;
	margin: 0;
}

.dossier-head__figures dt {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #64748b;
}

.dossier-head__figures dd {
	margin: .15rem 0 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.dossier-head__figures dd.is-eleve {
	color: #b42318;
}

/* ---------- Blocs de saisie ----------
   .dossier-form, .field, .dossier-actions, le bandeau .dossier-alerte et tout
   le bloc de repartition (compteur, table-imputation) vivent desormais dans
   repartition.css : l'ecran des reversements pose le meme geste sur ses
   bordereaux, et deux copies auraient diverge au premier ajustement.

   Le bandeau les a rejoints en dernier : les reversements l'utilisaient sans
   charger cette feuille-ci, et leurs avertissements s'affichaient donc en
   texte nu. */

/* Raccourci sous le champ montant : discret, mais assez lisible pour etre
   prefere a la recopie de tete du reste du. */
.lien-solder.ui-commandlink {
	align-self: flex-start;
	font-size: .74rem;
	font-weight: 600;
	color: #175cd3;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.lien-solder.ui-commandlink:hover {
	text-decoration: underline;
}

/* ---------- Justificatif du paiement ----------
   Encadré et non fondu dans le formulaire : joindre la preuve est une
   condition de l'enregistrement, pas un champ parmi d'autres. */

.dossier-justificatif {
	margin: 0 0 1rem;
	padding: .8rem .9rem;
	border: 1px dashed var(--surface-border, #cbd5e1);
	border-radius: .5rem;
	background: #fcfcfd;
}

.dossier-justificatif__head {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: .6rem;
	font-size: .78rem;
	font-weight: 600;
	color: #475467;
}

.dossier-justificatif__head strong {
	color: #b42318;
}

.dossier-justificatif__apercu {
	display: flex;
	align-items: center;
	gap: .7rem;
}

/* Assez grande pour vérifier d'un coup d'oeil qu'on a photographié le bon
   document — une vignette minuscule ne prouverait rien. */
.justificatif-vignette {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: .4rem;
	border: 1px solid var(--surface-border, #e3e8ef);
	background: #fff;
}

.justificatif-vignette.is-pdf {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	color: #b42318;
}

.justificatif-nom {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .8rem;
	color: #344054;
}

.dossier-justificatif__aide {
	margin-top: .55rem;
	font-size: .72rem;
	color: #667085;
}

/* ---------- File de confirmation ---------- */

/* Marque les versements dont la confirmation est réservée à l'administration :
   l'espèce, seule à n'avoir aucune preuve externe. */
.badge-admin {
	display: inline-block;
	margin-left: .35rem;
	padding: .05rem .35rem;
	border-radius: 999px;
	background: #eef2ff;
	color: #4338ca;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .02em;
}

/* Absence normale et absence anormale ne doivent pas se ressembler : la
   première est grise et muette, la seconde ambre et signalée. */
.piece-sans-objet {
	font-size: .72rem;
	color: #98a2b3;
	font-style: italic;
}

.piece-manquante {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .72rem;
	font-weight: 600;
	color: #b54708;
}

.piece-jointe {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .72rem;
	font-weight: 600;
	color: #027a48;
}

.motif-contestation {
	margin-top: .3rem;
	font-size: .72rem;
	font-style: italic;
	color: #b42318;
}

/* L'état d'un versement et ce qui le nuance s'empilent sous la pastille,
   alignés sur son bord gauche. Côte à côte, dans une cellule du gabarit dense
   qui ne revient jamais à la ligne, ils élargissaient la colonne au-delà de
   l'onglet — qui masque ce qui déborde : « Régularisé » disparaissait.

   Le motif revient à la ligne, sur deux lignes au plus : entier, il rendait
   la colonne aussi large que la plus longue phrase de la file. Le volet le
   donne en entier, le survol aussi. */
.etat-confirmation {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
}

.etat-confirmation .motif-contestation {
	margin-top: 0;
	max-width: 15rem;
	white-space: normal;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Refusé puis régularisé : la pastille de l'état dit « à confirmer », celle-ci
   dit ce qu'il faut revérifier. Même gabarit que .status-pill, en plus discret. */
.badge-regularise {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .15rem .55rem;
	border-radius: 999px;
	background: #eff8ff;
	color: #175cd3;
	font-size: .65rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.badge-regularise i {
	font-size: .6rem;
}

.col-actions {
	white-space: nowrap;
	text-align: right;
}

/* ---------- Journal des actions ---------- */

.journal {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0 0 0 1.1rem;
	border-left: 2px solid var(--surface-border, #e3e8ef);
}

.journal__item {
	position: relative;
	padding: 0 0 1.1rem 1rem;
}

.journal__item::before {
	content: "";
	position: absolute;
	left: -1.45rem;
	top: .35rem;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: #98a2b3;
	box-shadow: 0 0 0 3px #fff;
}

.journal__item.is-relance::before {
	background: #1570ef;
}

.journal__item.is-echec::before {
	background: #b42318;
}

.journal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
}

.journal__titre {
	font-weight: 650;
	font-size: .85rem;
}

.journal__date {
	font-size: .74rem;
	color: #667085;
}

.journal__meta {
	display: block;
	margin-top: .15rem;
	font-size: .75rem;
	color: #667085;
}

.journal__compte-rendu {
	margin: .35rem 0 0;
	font-size: .8rem;
	white-space: pre-line;
}

.journal__vide {
	padding: 1.5rem;
	text-align: center;
	color: #667085;
	font-size: .85rem;
}

/* ---------- Engagements ---------- */

.engagement-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	padding: .6rem .75rem;
	border: 1px solid var(--surface-border, #e3e8ef);
	border-radius: .45rem;
	margin-bottom: .5rem;
}

.engagement-row.is-retard {
	border-color: #fda29b;
	background: #fffbfa;
}

.engagement-row.is-imminente {
	border-color: #fec84b;
	background: #fffcf5;
}

.engagement-row__libelle {
	font-weight: 600;
	font-size: .85rem;
	min-width: 8rem;
}

.engagement-row__montant {
	font-weight: 700;
	font-size: .9rem;
}

.engagement-row__date {
	font-size: .78rem;
	color: #475467;
}

.engagement-row__actions {
	margin-left: auto;
}

/* ---------- Alerte client débiteur (souscription) ---------- */

.encours-alerte {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: .75rem 0;
	padding: .7rem 1rem;
	border-radius: .5rem;
	border: 1px solid #fec84b;
	background: #fffcf5;
	color: #93370d;
	font-size: .85rem;
}

.encours-alerte.is-critique {
	border-color: #fda29b;
	background: #fef3f2;
	color: #912018;
}

.encours-alerte__montant {
	font-weight: 700;
}

/* ==========================================================================
   Volet « dossier de quittance » de la page Recouvrement.
   Reprend le gabarit de recemment-regler.css (detail-drawer, detail-body,
   reglement-card). L'en-tête porte un nom propre : « detail-head » est déjà
   pris par le bandeau de synthèse de sherpa-dashboard.css, chargé sur la même
   page, et les deux définitions se marcheraient sur les pieds.
   ========================================================================== */

.detail-body .drawer-head {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .75rem;
	margin-bottom: .6rem;
	border-bottom: 1px solid #e5e7eb;
}

.drawer-head__ident {
	min-width: 0;
}

.drawer-head__name {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	overflow-wrap: anywhere;
}

.drawer-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .15rem .9rem;
	margin-top: .2rem;
	font-size: .75rem;
	color: #6b7280;
}

.drawer-head__meta i {
	margin-right: .25rem;
}

.drawer-head__state {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .35rem;
	flex: 0 0 auto;
}

/* Le bloc « Reste à payer » a rejoint recemment-regler.css : les deux volets
   qui le portent posent la même question, et deux copies auraient divergé.

   ---------------------------------------------------------------------------
   Couverture : suspendre ou remettre en vigueur.

   Une action secondaire, et présentée comme telle. Ce volet s'ouvre pour
   encaisser ; couper une garantie est rare, et ses deux champs occupaient le
   haut de l'écran au-dessus de ce que le caissier vient faire. Repliée
   derrière un bouton, l'action reste à portée sans rien réclamer.
   --------------------------------------------------------------------------- */

.couverture-bloc {
	margin-bottom: .7rem;
}

/* Le fait constaté qui rend le geste possible : lu avant le bouton. */
.couverture-motif {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .5rem .7rem;
	margin-bottom: .4rem;
	border-radius: .4rem;
	border: 1px solid #fedf89;
	background: #fffaeb;
	font-size: .8rem;
	color: #93370d;
}

.couverture-motif i {
	margin-top: .1rem;
}

/* Bouton de dépli : discret par construction — pas de fond plein, pas de
   couleur d'alerte. Il ouvre une décision, il ne la prend pas. */
.couverture-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .5rem .7rem;
	border: 1px dashed #d0d5dd;
	border-radius: .45rem;
	background: #fcfcfd;
	color: #475467;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.couverture-toggle:hover {
	border-color: #b42318;
	color: #b42318;
	background: #fffbfa;
}

.couverture-toggle__label {
	flex: 1 1 auto;
}

.couverture-toggle__chevron {
	flex: 0 0 auto;
	font-size: .7rem;
	transition: transform .15s ease;
}

.couverture-toggle.is-ouvert .couverture-toggle__chevron {
	transform: rotate(180deg);
}

.couverture-panneau {
	padding: .7rem .7rem .2rem;
	border: 1px solid #eaecf0;
	border-top: 0;
	border-radius: 0 0 .45rem .45rem;
	background: #fff;
}

/* Messages et confirmations déclenchés depuis le volet : le socle force celui-ci
   à z-index 11000 (recemment-regler.css) et ils passeraient dessous. Même
   correctif que sur commissions-percues.css. */
.ui-growl {
	z-index: 11040 !important;
}

.ui-confirm-dialog.ui-dialog {
	z-index: 11030 !important;
}

/* ============================================================
   Lecteur de justificatif
   ------------------------------------------------------------
   Déplacé dans apercu-justificatif.css : le même lecteur sert
   désormais le détail d'un contrat soldé. La page qui l'ouvre
   charge cette feuille en plus de celle-ci.
   ============================================================ */


/* Bouton de suppression d'un versement : discret, à l'extrémité de la carte */
.reglement-card-head .ui-button.ui-button-danger {
	flex: 0 0 auto;
}

/* Chevron de fin de ligne : réagit au survol de la ligne entière */
.stats-page .table-dense .ui-datatable-data > tr:hover .row-detail-cue {
	color: #8B1538;
	transform: translateX(2px);
}

@media (max-width: 640px) {
	.dossier-head__figures {
		gap: 1rem;
	}

	.dossier-head__figures dd {
		font-size: .95rem;
	}

	.detail-body .drawer-head {
		flex-direction: column;
	}

	.drawer-head__state {
		align-items: flex-start;
		flex-direction: row;
	}
}

/* ---------- Cession d'avoir ---------- */

.cession-recherche {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin-bottom: .9rem;
}

/* Le champ prend la place restante, jamais 100 % : dans une ligne flex, une
   largeur pleine pousse le bouton de recherche hors de la boîte. min-width:0
   l'autorise à se réduire sous la largeur de son texte d'invite — sans quoi
   un flex item refuse de descendre en dessous et déborde. */
.cession-recherche .ui-inputfield {
	flex: 1 1 12rem;
	min-width: 0;
}

.cession-recherche .ui-button {
	flex: 0 0 auto;
}

/* Le resultat reste court (50 lignes au plus) : il defile dans le volet
   plutot que d'allonger celui-ci au-dela de l'ecran. */
.cession-resultats {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	max-height: 260px;
	overflow-y: auto;
	margin-bottom: .9rem;
}

/* ---------- Un résultat de recherche, en carte ----------
   Partagée par les deux boîtes qui font chercher quelque chose à imputer :
   l'avoir d'un autre client, la créance d'un tiers. Le geste est le même —
   choisir une ligne dans une liste — et la carte entière est le bouton : au
   doigt, viser une cible de 50 px vaut mieux que viser un bouton de 20. */
.resultat-carte {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .55rem .7rem;
	border: 1px solid #e3e8ef;
	border-radius: .45rem;
	background: #fff;
	color: #475467;
	text-decoration: none;
	cursor: pointer;
}

.resultat-carte:hover {
	border-color: #8B1538;
	background: #fffbfa;
	text-decoration: none;
}

.resultat-carte.is-choisi {
	border-color: #12b76a;
	background: #f6fefa;
}

.resultat-carte__ident {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.resultat-carte__nom {
	font-size: .84rem;
	font-weight: 700;
	color: #101828;
	overflow-wrap: anywhere;
}

.resultat-carte__meta {
	font-size: .72rem;
	color: #667085;
	overflow-wrap: anywhere;
}

/* Sombre par défaut : le montant d'une créance est une dette. Vert sur un
   avoir, qui est de l'argent disponible — la couleur dit de quel côté on est. */
.resultat-carte__montant {
	flex: 0 0 auto;
	font-size: .9rem;
	font-weight: 800;
	color: #101828;
	white-space: nowrap;
}

.resultat-carte--avoir .resultat-carte__montant {
	color: #027a48;
}

/* Recapitulatif des deux parties : c'est la seule chose que le caissier doit
   relire avant de valider, elle est donc detachee du reste. */
.cession-recap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
	padding: .7rem .9rem;
	border-radius: .45rem;
	background: #f9fafb;
	border: 1px solid #eaecf0;
	font-size: .85rem;
	margin-bottom: .9rem;
}

.cession-recap__partie {
	font-weight: 600;
	color: #101828;
}

.cession-recap__fleche {
	color: #667085;
}

/* Une cession vers un tiers ne doit pas ressembler a une imputation ordinaire :
   le recapitulatif change de couleur des que les deux noms different. */
.cession-recap.is-tiers {
	background: #fffaeb;
	border-color: #fedf89;
	color: #93370d;
}

.cession-recap.is-tiers .cession-recap__partie {
	color: #93370d;
}

/* Pastille de mouvement sous le nom du souscripteur.
   La forme vient de recemment-regler.css, chargee par la page : c'est la meme
   pastille, sur le meme mouvement, et la dedoubler la ferait deriver. Seul
   l'ecart au bloc du dessus est repris ici, la cellule etant plus dense que
   celle de la liste des contrats soldes. */
.stats-page .table-dense td.col-principale .mvt-pill {
	margin-top: .2rem;
}

/* Le badge de ristourne suit desormais la prime TTC : porte par un bloc, il
   passe sous le montant qu'il qualifie plutot que de l'ecarter sur sa ligne.
   Le montant et la pastille sont deux blocs declares : la cellule etant en
   nowrap, s'en remettre au retour a la ligne naturel les remettrait cote a
   cote des que la colonne s'elargit. */
.stats-page .table-dense td.col-nombre .cell-montant,
.stats-page .table-dense td.col-nombre .cell-badge {
	display: block;
}
.stats-page .table-dense td.col-nombre .cell-badge {
	margin-top: .1rem;
	line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   LE GUICHET : encaisser une pièce sur les créances d'un client

   La saisie est passée de la quittance sélectionnée au dossier client :
   un client qui pose 620 000 F pour trois polices saisit une fois son
   montant, son moyen et son chèque, puis répartit.

   Tout tient dans un volet de 640 px — et sur téléphone, dans une
   feuille du bas qui occupe la largeur de l'écran. Ce qui suit est
   dessiné pour cette largeur-là : une colonne, des cartes, et une
   barre de décision qui ne quitte jamais l'écran.
   ══════════════════════════════════════════════════════════════════ */

.encaissement {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

/* ---------- Ce que le dossier doit, avant toute saisie ---------- */

.encaissement-dossier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	padding: .55rem .85rem;
	border-radius: .5rem;
	border: 1px solid #eaecf0;
	background: #f9fafb;
}

.encaissement-dossier__texte {
	font-size: .78rem;
	color: #475467;
}

.encaissement-dossier__texte i {
	margin-right: .35rem;
	color: #98a2b3;
}

.encaissement-dossier__label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #667085;
	margin-right: .4rem;
}

.encaissement-dossier__value {
	font-size: 1rem;
	font-weight: 800;
	color: #101828;
}

/* ---------- L'avoir : une source d'argent, pas une étape ---------- */

.source-avoir {
	padding: .6rem .85rem;
	border-radius: .5rem;
	border: 1px solid #b2ddff;
	background: #f5faff;
}

.source-avoir__tete {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .82rem;
	color: #175cd3;
}

.source-avoir__geste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: .45rem;
}

.source-avoir__geste .input-plafond-avoir {
	flex: 1 1 9rem;
	max-width: 15rem;
}

.source-avoir__aide {
	display: block;
	margin-top: .35rem;
	font-size: .71rem;
	color: #667085;
}

.source-avoir-tiers {
	margin-top: -.15rem;
}

/* Un geste rare ne prend pas la place d'un bloc : il prend celle d'un lien. */
.lien-discret {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .76rem;
	color: #667085;
	text-decoration: none;
}

.lien-discret:hover {
	color: #8B1538;
	text-decoration: underline;
}

/* ---------- Les étapes ---------- */

.etape {
	padding: .75rem .85rem .85rem;
	border-radius: .55rem;
	border: 1px solid #eaecf0;
	background: #fff;
}

.etape__tete {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin-bottom: .7rem;
}

/* Le numéro d'étape : un repère, pas une décoration. Deux étapes, et le
   caissier doit voir laquelle il est en train de remplir. */
.etape__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: #8B1538;
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
}

.etape__titre {
	margin: 0;
	font-size: .92rem;
	font-weight: 700;
	color: #101828;
}

.etape__aide {
	display: block;
	font-size: .73rem;
	color: #667085;
}

/* La tête de l'étape 2 porte à droite les boutons de service ; ils passent
   à la ligne d'eux-mêmes quand la largeur manque. */
.etape > .dossier-actions--secondaires {
	border-top: 0;
	padding-top: 0;
}

/* ---------- Le montant reçu : le champ vedette ---------- */

/* Le premier geste du guichet et le seul chiffre que le caissier tape
   lui-même. Il était noyé dans une grille de champs à deux colonnes, à la
   même taille que la date du paiement. */
.champ-vedette {
	margin-bottom: .8rem;
}

.champ-vedette label {
	display: block;
	font-size: .74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #475467;
	margin-bottom: .25rem;
}

.champ-vedette__saisie {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.champ-vedette__saisie .ui-inputnumber,
.champ-vedette__saisie .ui-inputfield {
	flex: 1 1 auto;
	width: 100%;
}

.champ-vedette__saisie .ui-inputfield {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .01em;
	padding: .45rem .6rem;
	text-align: right;
	color: #101828;
}

.champ-vedette__devise {
	flex: 0 0 auto;
	font-size: .78rem;
	font-weight: 700;
	color: #667085;
}

/* ---------- Le moyen de paiement, à la tuile ---------- */

.moyens {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: .4rem;
	margin-bottom: .8rem;
}

.moyen-tuile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	padding: .55rem .35rem;
	border: 1px solid #e3e8ef;
	border-radius: .5rem;
	background: #fff;
	color: #475467;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.moyen-tuile:hover {
	border-color: #8B1538;
	color: #8B1538;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(16, 24, 40, .08);
}

.moyen-tuile__icone {
	font-size: 1.05rem;
}

.moyen-tuile__label {
	font-size: .7rem;
	font-weight: 600;
	line-height: 1.15;
}

/* Le moyen retenu : plein, pour qu'on le voie sans le chercher — c'est lui
   qui commande l'exigence du justificatif et l'apparition des champs du
   chèque, et se tromper de tuile se paie plus loin dans la saisie. */
.moyen-tuile.is-actif,
.moyen-tuile.is-actif:hover {
	border-color: #8B1538;
	background: linear-gradient(135deg, #8B1538, #A91D4A);
	color: #fff;
	box-shadow: 0 4px 12px rgba(139, 21, 56, .25);
}

/* Une touche de la couleur de marque sur l'icône : quatre porte-monnaie
   mobiles partagent la même icône, et le texte seul les distinguait. */
.moyen-tuile--wave .moyen-tuile__icone { color: #1dc4ff; }
.moyen-tuile--orange-money .moyen-tuile__icone { color: #ff7900; }
.moyen-tuile--moov-money .moyen-tuile__icone { color: #0057b8; }
.moyen-tuile--mtn-money .moyen-tuile__icone { color: #d8b400; }
.moyen-tuile--espece .moyen-tuile__icone { color: #12b76a; }
.moyen-tuile--cheque .moyen-tuile__icone { color: #6941c6; }
.moyen-tuile--virement-bancaire .moyen-tuile__icone { color: #175cd3; }
.moyen-tuile--sherpapay .moyen-tuile__icone { color: #8B1538; }
/* Gris, et c'est voulu : aucun argent n'entre, la tuile ne doit pas se lire
   comme un moyen de paiement parmi d'autres. */
.moyen-tuile--solde-entreprise .moyen-tuile__icone { color: #475467; }

.moyen-tuile.is-actif .moyen-tuile__icone {
	color: #fff;
}

/* Bloc qui n'apparaît que sous condition (identité du chèque) : détaché du
   reste pour qu'on voie qu'il vient de répondre au choix qu'on vient de faire. */
.sous-bloc {
	padding: .65rem .7rem .1rem;
	margin-bottom: .8rem;
	border-left: 3px solid #6941c6;
	border-radius: .3rem;
	background: #fafaff;
}

.sous-bloc .dossier-form {
	margin-bottom: .4rem;
}

/* ---------- Les créances, en cartes ---------- */

.creances {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: .3rem;
}

.creance-carte {
	padding: .6rem .7rem;
	border: 1px solid #e3e8ef;
	border-radius: .5rem;
	background: #fff;
}

/* Servie : la carte le dit d'un coup d'œil. Sur un dossier de huit créances,
   savoir lesquelles sont déjà pourvues sans relire huit montants est ce qui
   distingue une répartition tenue d'une répartition devinée. */
.creance-carte.is-servie {
	border-color: #a6f4c5;
	background: #f6fefa;
}

/* Une créance portée par un autre nom ne doit jamais ressembler à une créance
   du payeur : c'est la seule chose qui distingue un règlement pour le compte
   d'un tiers d'une erreur d'affectation. Même teinte que cession-recap.is-tiers,
   pour la même raison et sur le même geste. */
.creance-carte.is-tiers {
	border-color: #fedf89;
	background: #fffaeb;
}

.creance-carte__tete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .6rem;
}

.creance-carte__ident {
	min-width: 0;
}

.creance-carte__code {
	font-size: .82rem;
	font-weight: 700;
	color: #101828;
	overflow-wrap: anywhere;
}

.creance-carte__meta,
.creance-carte__nom {
	font-size: .72rem;
	color: #667085;
}

.creance-carte__nom {
	margin-top: .15rem;
	color: #93370d;
}

.creance-carte__du {
	flex: 0 0 auto;
	text-align: right;
}

.creance-carte__du-label {
	display: block;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #667085;
}

.creance-carte__du-value {
	font-size: .95rem;
	font-weight: 800;
	color: #101828;
	white-space: nowrap;
}

.creance-carte__saisie {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-top: .5rem;
}

.creance-carte__saisie .input-imputer,
.creance-carte__saisie .ui-inputnumber {
	flex: 1 1 auto;
	min-width: 0;
}

.creance-carte__saisie .input-imputer .ui-inputfield {
	width: 100%;
	text-align: right;
	font-weight: 600;
}

.bouton-solder {
	flex: 0 0 auto;
	white-space: nowrap;
}

.creance-carte__motif {
	margin-top: .35rem;
}

.creance-carte__motif .input-motif-tiers {
	width: 100%;
	font-size: .78rem;
}

/* Ce qu'une créance reçoit quand il n'y a rien à répartir : une ligne de
   lecture, à la place du champ et de ses trois boutons. */
.creance-carte__impute {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin-top: .5rem;
	padding-top: .45rem;
	border-top: 1px dashed #e3e8ef;
}

.creance-carte__impute i {
	color: #12b76a;
	font-size: .75rem;
}

.creance-carte__impute-label {
	font-size: .72rem;
	color: #667085;
}

.creance-carte__impute-value {
	margin-left: auto;
	font-size: .95rem;
	font-weight: 800;
	color: #027a48;
	white-space: nowrap;
}

/* ---------- La relance : une action secondaire, repliée ----------
   Elle ne sert pas tous les jours, et son champ occupait une ligne entière
   sur chaque carte, à hauteur de ce que le caissier doit remplir. Réduite à
   un bouton texte qui déplie son champ — et qui, une fois la date posée,
   affiche cette date : c'est alors lui qui porte l'information. */

.creance-carte__relance {
	margin-top: .3rem;
}

.relance-bascule {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .1rem 0;
	border: 0;
	background: none;
	color: #667085;
	font-size: .72rem;
	font-weight: 600;
	cursor: pointer;
}

.relance-bascule:hover {
	color: #8B1538;
	text-decoration: underline;
}

.relance-bascule i {
	font-size: .7rem;
}

/* Une relance posée n'est plus une proposition : elle se lit. L'attribut
   couvre les deux origines de l'état — celui que le serveur rend sur une date
   déjà saisie, et celui que le clic vient de poser. */
.relance-bascule[aria-expanded="true"] {
	color: #8B1538;
}

.relance-panneau {
	margin-top: .25rem;
}

.relance-panneau .ui-inputfield,
.relance-panneau .input-relance {
	font-size: .76rem;
	max-width: 9rem;
}

/* Le repli se fait par une classe, jamais par l'attribut hidden : celui-ci,
   piloté par une expression, se rend « présent et vide » — donc masqué pour
   toujours. Vaut pour tous les panneaux secondaires du volet. */
.est-replie {
	display: none !important;
}

/* ---------- La barre de décision ---------- */

/* Le compteur et le bouton, ensemble et à la fin de la saisie. Le compteur
   commande le bouton : les séparer par la liste des créances — le compteur en
   haut, le bouton tout en bas — obligeait le caissier à remonter pour lire
   l'un et redescendre pour cliquer l'autre, à chaque montant saisi.

   La barre ne colle plus au bas du volet. Épinglée, elle amputait la hauteur
   utile — et sur tablette, entre elle et l'en-tête, il ne restait plus grand
   chose pour lire les créances qu'on vient répartir. Elle défile avec le
   reste ; son liseré et son ombre disent qu'elle clôt la saisie. */
.encaissement-barre {
	margin: .25rem -.15rem 0;
	padding: .6rem .7rem .5rem;
	border-top: 1px solid #e3e8ef;
	border-radius: .5rem .5rem 0 0;
	background: #fff;
	box-shadow: 0 -6px 16px rgba(16, 24, 40, .07);
}

.encaissement-barre .affectation-compteur {
	margin-bottom: .45rem;
}

.encaissement-barre .dossier-actions {
	border-top: 0;
	padding-top: 0;
}

/* L'enregistrement est le geste de la barre : les deux autres boutons
   l'accompagnent, ils ne le concurrencent pas. */
.encaissement-barre .bouton-enregistrer {
	flex: 1 1 12rem;
	justify-content: center;
}

.bloc-reliquat {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin-bottom: .45rem;
	padding: .45rem .6rem;
	border-radius: .4rem;
	border: 1px solid #fedf89;
	background: #fffaeb;
}

.bloc-reliquat .field__aide {
	font-size: .71rem;
	color: #93370d;
}

/* ---------- Étroit ---------- */

@media (max-width: 520px) {

	.etape {
		padding: .6rem .55rem .7rem;
	}

	.moyens {
		grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
	}

	.creance-carte__tete {
		flex-direction: column;
		gap: .2rem;
	}

	.creance-carte__du {
		text-align: left;
	}

	.creance-carte__du-label {
		display: inline;
		margin-right: .3rem;
	}

	/* Le montant reste seul sur sa ligne, les gestes passent en dessous :
	   à cette largeur, trois boutons et un champ sur une ligne rendaient le
	   champ trop court pour lire la somme qu'on y tape. */
	.creance-carte__saisie {
		flex-wrap: wrap;
	}

	.creance-carte__saisie .input-imputer,
	.creance-carte__saisie .ui-inputnumber {
		flex: 1 0 100%;
	}
}

/* ---------- Le volet du guichet sur écran étroit ---------- */

@media (max-width: 520px) {

	/* Le geste de recherche passe en deux lignes : à cette largeur, un champ
	   et un bouton côte à côte laissent au champ la place de six caractères. */
	.cession-recherche .ui-inputfield,
	.cession-recherche .ui-button {
		flex: 1 0 100%;
	}

	/* Le montant repasse sous le nom : côte à côte, l'un des deux se coupe. */
	.resultat-carte {
		flex-direction: column;
		align-items: flex-start;
		gap: .2rem;
	}

	/* Le récapitulatif des deux parties tient sur plusieurs lignes plutôt que
	   de forcer le volet à s'élargir. */
	.cession-recap {
		font-size: .8rem;
	}
}

/* ---------- Le rappel du dernier reçu ----------
   Posée entre les compteurs et les onglets, cette bande est ce qui reste du
   volet une fois qu'il s'est retiré pour laisser lire la confirmation : le
   client est encore au comptoir, et son reçu doit tenir en un clic. Verte et
   basse, jamais une alerte — elle annonce une chose faite, pas une chose à
   faire. */

.bandeau-recu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem .85rem;
	margin: 0 0 1.25rem;
	padding: .6rem .9rem;
	border: 1px solid #bbf7d0;
	border-left: 3px solid #16a34a;
	border-radius: 8px;
	background: #f0fdf4;
	color: #14532d;
	font-size: .85rem;
}

.bandeau-recu__icone {
	color: #16a34a;
	font-size: 1rem;
}

/* Le texte prend la place disponible : les deux boutons restent collés au
   bord droit, où la main du caissier les retrouve d'une fois sur l'autre. */
.bandeau-recu__texte {
	flex: 1 1 auto;
}

.bandeau-recu__fermer.ui-button {
	color: #14532d;
}

/* ---------- Ce que le controle a refuse au saisisseur ----------
   Meme forme que la bande du recu, ton oppose : celle-la felicite, celle-ci
   reclame. Elle porte plusieurs lignes, la ou l'autre n'en porte qu'une. */
.bandeau-refus {
	margin: 0 0 1.25rem;
	padding: .6rem .9rem;
	border: 1px solid #fecaca;
	border-left: 3px solid #dc2626;
	border-radius: 8px;
	background: #fef2f2;
	color: #7f1d1d;
	font-size: .85rem;
}

.bandeau-refus__head {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-weight: 500;
}

.bandeau-refus__head > i {
	color: #dc2626;
	margin-top: .1rem;
}

/* Une ligne par refus : le motif prend la place restante, le bouton reste au
   bord droit. Le caissier lit ce qu'on lui reproche avant de decider. */
.bandeau-refus__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px solid #fecaca;
}

.bandeau-refus__ligne .motif-contestation {
	flex: 1 1 12rem;
	font-style: italic;
}

@media (max-width: 520px) {

	/* Le motif passe pleine largeur : tasse entre le moyen et le bouton, il
	   devenait la seule chose illisible d'une bande qui n'existe que pour lui. */
	.bandeau-refus__ligne .motif-contestation {
		flex: 1 0 100%;
	}
}

@media (max-width: 520px) {

	/* Le reçu passe pleine largeur : c'est le geste de la bande, et un bouton
	   de six caractères en bout de ligne se rate au doigt. */
	.bandeau-recu__texte {
		flex: 1 0 100%;
	}

	.bandeau-recu > .ui-button:not(.bandeau-recu__fermer) {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ---------- Répartition de la file de confirmation par moyen ----------
   Une barre par moyen, cliquable : elle dit ce que le moyen pèse et sert de
   filtre. Ce n'est pas un graphique décoratif — le moyen commande la
   vérification (une espèce n'a aucune preuve externe, un virement se confronte
   à un bordereau), et il commande aussi qui peut confirmer.

   Grille à quatre colonnes et non flex : le nom, la barre, la part et les
   montants doivent s'aligner d'une ligne à l'autre, sans quoi les pourcentages
   ne se comparent plus d'un coup d'œil. */

.repartition-moyens {
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.repartition-moyens__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5rem .6rem;
	margin-bottom: .9rem;
}

.repartition-moyens__head .section-head__title {
	font-size: 1.05rem;
}

.stats-page a.repartition-ligne,
.stats-page a.repartition-ligne:hover,
.stats-page a.repartition-ligne:focus {
	text-decoration: none;
	color: inherit;
}

.repartition-ligne {
	display: grid;
	grid-template-columns: minmax(8.5rem, 13rem) 1fr 3rem minmax(9rem, auto);
	align-items: center;
	gap: .5rem .9rem;
	padding: .5rem .55rem;
	border-radius: .5rem;
	border: 1px solid transparent;
	cursor: pointer;
}

.repartition-ligne:hover,
.repartition-ligne:focus-visible {
	background: #f8fafc;
	border-color: var(--line, #e4e9f2);
}

/* Le moyen retenu reste visible une fois cliqué : sans cela, la liste
   déroulante serait le seul endroit disant sur quoi la file est filtrée. */
.repartition-ligne.is-active {
	background: var(--brand-soft, #f8e9ee);
	border-color: var(--brand, #8b1538);
}

/* Un mode que l'application ne reconnaît pas se lit, mais ne filtre rien : la
   ligne doit donc cesser de se présenter comme un bouton. */
.stats-page a.repartition-ligne.ui-state-disabled {
	cursor: default;
	opacity: 1;
}

.stats-page a.repartition-ligne.ui-state-disabled:hover {
	background: transparent;
	border-color: transparent;
}

.repartition-ligne__nom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25rem .4rem;
	font-size: .84rem;
	font-weight: 700;
	color: #1f2a37;
}

.repartition-ligne__nom > i {
	color: var(--slate, #5b6b85);
}

.repartition-ligne__barre {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: #eef1f6;
	overflow: hidden;
}

/* Une part arrondie à zéro ne doit pas rendre une barre vide : elle ferait
   croire que le moyen ne pèse rien, alors qu'il attend bel et bien une
   vérification. Le minimum est posé sur la largeur, dans la vue. */
.repartition-ligne__barre > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--brand, #8b1538);
}

.repartition-ligne__part {
	font-size: .92rem;
	font-weight: 800;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: #1f2a37;
}

.repartition-ligne__chiffres {
	text-align: right;
	font-size: .85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #1f2a37;
}

.repartition-ligne__nombre {
	display: block;
	margin-top: .1rem;
	font-size: .72rem;
	font-weight: 500;
	color: var(--slate, #5b6b85);
}

/* Couleurs de marque des moyens : la barre se reconnaît sans lire son nom, et
   les mêmes teintes se retrouvent partout où l'écran fait choisir un moyen. */
.repartition-ligne__barre > .moyen--espece { background: #16a34a; }
.repartition-ligne__barre > .moyen--cheque { background: #6366f1; }
.repartition-ligne__barre > .moyen--virement-bancaire { background: #0ea5e9; }
.repartition-ligne__barre > .moyen--sherpapay { background: #0e8c7f; }
.repartition-ligne__barre > .moyen--wave { background: #1dc3e8; }
.repartition-ligne__barre > .moyen--orange-money { background: #ff7900; }
.repartition-ligne__barre > .moyen--moov-money { background: #0055a5; }
.repartition-ligne__barre > .moyen--mtn-money { background: #f5c518; }
.repartition-ligne__barre > .moyen--avoir { background: #8b5cf6; }
.repartition-ligne__barre > .moyen--solde-entreprise { background: #64748b; }
.repartition-ligne__barre > .moyen--inconnu { background: #94a3b8; }

@media (max-width: 720px) {

	/* La barre passe sous le nom : réduite à deux centimètres entre un libellé
	   et un montant, elle ne se lisait plus, et c'est elle qui porte la
	   comparaison. */
	.repartition-ligne {
		grid-template-columns: 1fr auto;
		gap: .3rem .6rem;
	}

	.repartition-ligne__nom {
		grid-column: 1;
	}

	.repartition-ligne__part {
		grid-column: 2;
		text-align: right;
	}

	.repartition-ligne__barre {
		grid-column: 1 / -1;
		order: 3;
	}

	.repartition-ligne__chiffres {
		grid-column: 1 / -1;
		order: 4;
		text-align: left;
	}

	.repartition-ligne__nombre {
		display: inline;
		margin-left: .4rem;
	}
}