/* ============================================================================
   IV PAY — l'écran Paiements de /gestion.
   ⚠️ Vérifié à 375 px et à 1280 px : rien ne déborde. Le seul élément large,
   le tableau d'historique, défile DANS SON PROPRE CADRE — jamais la page.
   ============================================================================ */

/* ============================================================================
   CHARTE IV PAY — l'écran Paiements porte le bleu-indigo propre d'IV Pay
   (voir ../../DESIGN.md), pas le rouge de /gestion. Tout est scopé à
   #mod-paiements : le reste de /gestion garde sa couleur. Le rouge reste
   réservé aux alertes (encaissé non livré, en retard) et au champ obligatoire.
   ============================================================================ */
#mod-paiements .btn-red { background: #2B46D4; border-color: #2B46D4; }
#mod-paiements .btn-red:hover { background: #1E34A8; border-color: #1E34A8; }

.pay-compte { display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px; background: #2B46D4; color: #fff;
  font-size: .74rem; font-weight: 700; margin-left: 7px; vertical-align: middle; }

.pay-vide { font-size: .88rem; color: var(--muted); padding: 14px 0; margin: 0; }

/* ---- Une ligne de paiement ---- */
/* ⚠️ ON EMPRUNTE `.client-card` POUR SON HABILLAGE, PAS POUR SA DISPOSITION.
   Cette classe de /gestion est en `display:flex; flex-direction:row` — une
   fiche client range son avatar a gauche et ses infos a droite. Nos blocs,
   eux, sont faits pour s'empiler : sans cette remise en colonne, ils se
   placaient cote a cote et le dernier sortait de l'ecran.
   Mesure a 375 px : les boutons d'action commencaient a 338 px et la page
   partait a 428. Invisible en lisant le code — il fallait mesurer. */
.pay-ligne { margin-bottom: 12px; flex-direction: column; align-items: stretch; }
.pay-ligne-tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pay-ligne-tete b { font-size: .97rem; }
.pay-somme { font-family: Sora, sans-serif; font-weight: 700; font-size: 1.15rem;
  color: #1E34A8; white-space: nowrap; }

.pay-ligne-corps { display: grid; gap: 9px 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pay-ligne-corps > div { min-width: 0; }
.pay-ligne-corps span { display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 2px; }
.pay-ligne-corps b { font-size: .88rem; font-weight: 600;
  /* Une adresse e-mail longue casse la grille si on ne la laisse pas revenir
     à la ligne — cas banal, pas un cas limite. */
  overflow-wrap: anywhere; }
.pay-txn { font-family: ui-monospace, Consolas, monospace; font-size: .84rem !important; }
.pay-tard { color: var(--rouge, #C21510) !important; }

.pay-note-cand { font-size: .85rem; font-style: italic; color: var(--muted);
  margin: 10px 0 0; padding-left: 11px; border-left: 3px solid var(--line); }

.pay-actions { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.pay-actions .btn-red, .pay-actions .btn-ghost { flex: 1 1 auto; min-width: 140px; }

.pay-ligne-alerte { border-left: 4px solid var(--rouge, #E8231A); }
.pay-reparer { display: flex; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.pay-reparer input { flex: 1 1 220px; min-width: 0; }
.pay-reparer .btn-red { flex: 0 0 auto; }

/* ---- Les réglages ---- */
.pay-moyen-reglage { border: 1px solid var(--line); border-radius: 10px;
  padding: 15px; margin-bottom: 14px; }

/* ---- Les filtres ---- */
.pay-filtres { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.pay-filtres button { font-size: .8rem; padding: 6px 13px; }
.pay-filtres button.on { background: #2B46D4; color: #fff; border-color: #2B46D4; }

/* ---- Le tableau d'historique ---- */
/* ⚠️ C'est le conteneur qui défile, pas la page. Sans cet overflow, un
   tableau de 7 colonnes pousse tout /gestion en largeur sur un téléphone. */
.pay-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 10px; }
.pay-tableau table { width: 100%; border-collapse: collapse; min-width: 720px; }
.pay-tableau th { text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); padding: 10px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.pay-tableau td { font-size: .84rem; padding: 10px 12px;
  border-bottom: 1px solid var(--line); vertical-align: middle; }
.pay-tableau tr:last-child td { border-bottom: none; }
.pay-tableau code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.pay-num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

.pay-etiq { display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .73rem; font-weight: 600; white-space: nowrap; }
.pay-vert   { background: var(--teal-tint, #E8F5EE); color: var(--teal-ink, #1B7A4C); }
.pay-orange { background: var(--ocre-tint, #FFF8E6); color: var(--ocre, #8A6A00); }
.pay-rouge  { background: var(--rouge-tint, #FDECEA); color: var(--rouge, #C21510); }
.pay-gris   { background: var(--fond-doux, #F1EEED); color: var(--muted, #6B6360); }

/* ⚠️ Les cases à cocher natives font 13 px et s'affichent en BLEU Windows :
   trop petites pour un doigt, et étrangères à la charte. On les remet à la
   taille du reste et à la couleur du site. (Remarque d'Alex sur IV Manager :
   « très ancien surtout les cases ».) */
#mod-paiements input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: #2B46D4; cursor: pointer; flex: none;
}

/* ⚠️ SUR TELEPHONE, LES DEUX BOUTONS NE TIENNENT PAS COTE A COTE.
   Mesure a 375 px : « J'ai recu — ouvrir l'acces » et « Rien recu » cote a
   cote occupaient 478 px et poussaient TOUT /gestion en largeur. Le
   `flex-wrap: wrap` ne suffisait pas : un bouton dont le TEXTE est plus large
   que son `min-width` ne retrecit pas, il deborde. Il faut donc l'autoriser a
   descendre en dessous de sa largeur naturelle (`min-width: 0`) et lui donner
   toute la ligne. */
@media (max-width: 560px) {
  .pay-actions { flex-direction: column; }
  .pay-actions .btn-red, .pay-actions .btn-ghost {
    flex: 1 1 auto; min-width: 0; width: 100%;
  }
  .pay-reparer { flex-direction: column; }
  .pay-reparer input, .pay-reparer .btn-red { width: 100%; min-width: 0; }
  /* Le libelle d'un produit peut etre long : il revient a la ligne au lieu
     d'ecarter la carte. */
  .pay-ligne-tete b { overflow-wrap: anywhere; min-width: 0; }
}

/* ---- Les prix, dans leur tableau ---- */
.pay-famille td { background: var(--fond-doux, #F4F1F0); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); padding: 8px 12px !important; }
.pay-tableau input[type="number"] {
  width: 110px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .88rem; font-variant-numeric: tabular-nums; }
.pay-tableau input[type="number"]:focus {
  outline: none; border-color: #2B46D4; box-shadow: 0 0 0 3px #ECEFFC; }
/* Même remise à la charte que les autres cases : 13 px et bleu Windows par
   défaut, c'est trop petit pour un doigt et étranger au site. */
.pay-tableau input[type="checkbox"] { width: 17px; height: 17px; accent-color: #2B46D4; cursor: pointer; }