/* Écran Paiements (paiements.js). Téléphone d'abord : cartes empilées, cibles de 44 px. */
#pay-root { --pay-vert: #1B5E3F; --pay-vert-clair: #eef5f1; --pay-bord: #e5e7eb; --pay-gris: #6b7280;
  --pay-retard: #b91c1c; --pay-retard-clair: #fdecec; --pay-att: #b45309; --pay-att-clair: #fff7ed;
  display: flex; flex-direction: column; gap: .9rem; font-size: .9rem; }
#pay-root button { font-family: inherit; cursor: pointer; }
#pay-root .pay-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#pay-root .pay-sm { font-size: .8rem; color: var(--pay-gris); }
#pay-root .pay-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#pay-root .pay-vide, #pay-root .pay-erreur { padding: 1.5rem; text-align: center; color: var(--pay-gris); background: #fff; border: 1px dashed var(--pay-bord); border-radius: 12px; }
#pay-root .pay-erreur { color: var(--pay-retard); }
#pay-root .pay-msg { background: var(--pay-vert-clair); color: var(--pay-vert); border-radius: 10px; padding: .7rem .9rem; font-weight: 600; }
#pay-root .pay-def { margin: 0; font-size: .76rem; color: var(--pay-gris); }

.pay-tuiles { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .6rem; }
.pay-tuile { background: #fff; border: 1px solid var(--pay-bord); border-radius: 12px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pay-tuile span { font-size: .72rem; color: var(--pay-gris); text-transform: uppercase; letter-spacing: .04em; }
.pay-tuile b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pay-tuile-reste { background: var(--pay-vert-clair); border-color: #c2ddd0; }
.pay-tuile-reste b { color: var(--pay-vert); font-size: 1.4rem; }
.pay-tuiles-sm .pay-tuile b { font-size: 1rem; }
.pay-alerte { text-align: left; background: var(--pay-att-clair); border: 1.5px solid #fed7aa; color: var(--pay-att); border-radius: 10px; padding: .7rem .9rem; font-weight: 600; font-size: .85rem; }

.pay-onglets { display: flex; gap: .3rem; overflow-x: auto; border-bottom: 2px solid var(--pay-bord); }
#pay-root .pay-onglet { border: none; background: none; padding: .7rem .8rem; font-weight: 700; font-size: .84rem; color: #9ca3af; border-bottom: 2.5px solid transparent; margin-bottom: -2px; white-space: nowrap; min-height: 44px; }
#pay-root .pay-onglet.actif { color: var(--pay-vert); border-bottom-color: var(--pay-vert); }
.pay-compte { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: .72rem; }

.pay-barre { display: flex; flex-direction: column; gap: .5rem; }
#pay-q { width: 100%; box-sizing: border-box; padding: .7rem .9rem; border: 1.5px solid var(--pay-bord); border-radius: 10px; font: inherit; min-height: 44px; }
.pay-filtres { display: flex; gap: .4rem; flex-wrap: wrap; }
.pay-filtre { border: 1.5px solid var(--pay-bord); background: #fff; border-radius: 999px; padding: .4rem .85rem; font-size: .8rem; font-weight: 600; color: #374151; min-height: 36px; }
.pay-filtre.actif { background: var(--pay-vert); border-color: var(--pay-vert); color: #fff; }

.pay-liste { display: flex; flex-direction: column; gap: .5rem; }
.pay-carte { display: flex; flex-direction: column; gap: .25rem; text-align: left; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--pay-bord); border-radius: 12px; padding: .75rem .9rem; color: inherit; font: inherit; min-height: 44px; }
button.pay-carte:hover, button.pay-carte:focus-visible { border-color: var(--pay-vert); }
.pay-carte-h, .pay-carte-b { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.pay-carte-l, .pay-carte-b > span { font-size: .8rem; color: var(--pay-gris); }
.pay-carte-case { flex-direction: row; align-items: center; gap: .7rem; cursor: pointer; }
.pay-carte-case input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.pay-carte-case > span { flex: 1; min-width: 0; }
.pay-montant { width: 6rem; padding: .45rem .5rem; border: 1.5px solid var(--pay-bord); border-radius: 8px; font: inherit; text-align: right; }

.pay-puce { display: inline-block; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.pay-ok { background: var(--pay-vert-clair); color: var(--pay-vert); }
.pay-neutre { background: #f3f4f6; color: #4b5563; }
.pay-retard { background: var(--pay-retard-clair); color: var(--pay-retard); }
.pay-att { color: var(--pay-att); }

.pay-retour { align-self: flex-start; border: none; background: none; color: var(--pay-vert); font-weight: 700; padding: .4rem 0; min-height: 44px; }
.pay-fiche-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pay-fiche-h h3 { margin: 0; font-size: 1.2rem; }
.pay-bloc { background: #fff; border: 1px solid var(--pay-bord); border-radius: 12px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.pay-bloc h4, .pay-titre2 { margin: 0; font-size: .95rem; }
.pay-bloc label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 600; color: #374151; }
.pay-bloc select, .pay-form select, .pay-form input:not([type=checkbox]) { padding: .55rem .6rem; border: 1.5px solid var(--pay-bord); border-radius: 8px; font: inherit; min-height: 42px; background: #fff; }
.pay-resp { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; }
.pay-resp a { color: var(--pay-vert); font-weight: 600; }
.pay-enfant-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pay-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .82rem; border-top: 1px solid #f3f4f6; padding-top: .35rem; flex-wrap: wrap; }
.pay-ligne > span { flex: 1; min-width: 12rem; }
.pay-ligne-tot { font-weight: 700; font-size: .88rem; }
.pay-annule > span, .pay-annule > b { text-decoration: line-through; color: #9ca3af; }
.pay-lien { border: none; background: none; color: var(--pay-retard); font-size: .78rem; text-decoration: underline; padding: .2rem; }
.pay-cheques { display: flex; flex-direction: column; gap: .3rem; }
.pay-cheque { font-size: .8rem; }
.pay-resume { margin: 0; font-weight: 600; font-size: .85rem; padding: .5rem .7rem; border-radius: 8px; }
.pay-resume.pay-ok { background: var(--pay-vert-clair); }
.pay-resume.pay-att { background: var(--pay-att-clair); }

.pay-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pay-btn { background: var(--pay-vert); color: #fff; border: none; border-radius: 10px; padding: .7rem 1rem; font-weight: 700; font-size: .85rem; min-height: 44px; flex: 1 1 auto; }
.pay-btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-btn-2 { background: #fff; color: var(--pay-vert); border: 1.5px solid var(--pay-vert); }
.pay-form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; background: #f9fafb; border: 1px solid var(--pay-bord); border-radius: 10px; padding: .8rem; }
.pay-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; font-weight: 600; color: #374151; min-width: 0; }
.pay-form .pay-large { grid-column: 1 / -1; }
.pay-form .pay-case { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
.pay-form .pay-case input { width: 20px; height: 20px; }

.pay-bordereau { background: #fff; border: 1px solid var(--pay-bord); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.pay-bordereau h3 { margin: 0; }
.pay-tableau { overflow-x: auto; }
.pay-tableau table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pay-tableau th, .pay-tableau td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--pay-bord); }
.pay-tableau td.pay-num { text-align: right; }

@media (max-width: 520px) {
  .pay-tuiles { grid-template-columns: 1fr 1fr; }
  .pay-tuile-reste { grid-column: 1 / -1; }
  .pay-form { grid-template-columns: 1fr; }
}
@media print {
  body * { visibility: hidden !important; }
  .pay-bordereau, .pay-bordereau * { visibility: visible !important; }
  .pay-bordereau { position: absolute; left: 0; top: 0; width: 100%; border: none; }
  .pay-bordereau .pay-actions { display: none !important; }
}