/* ch.620 — RELANCES VISIBLES sur les tuiles (factures ⊕ devis) ; DEVIS en tuiles fines (classes fc588 RÉUTILISÉES, R60).
   La zone « état » passe sur DEUX lignes : pastille ⊕ puces, puis badges de relance — ⛔ plus rien n'est coupé (avant : une ligne, overflow caché).
   Charte claire, ⛔ aucune variable CSS ; warning #F59E0B, danger #EF4444 (seuil en base). */

.fc588-etat.fc620-etat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; white-space: normal; overflow: visible; }
.fc620-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.fc620-l2 { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.fc620-l2:empty { display: none; }
.fc620-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 1.5;
  white-space: nowrap; cursor: help; flex: 0 0 auto; }
.fc620-badge:focus-visible { outline: 2px solid #22D3EE; outline-offset: 1px; }

/* ── DEVIS : même tuile que les factures ; la tuile ⛔ ne coupe jamais (badges « modifié », « signé », relance ⇒ elle grandit) ── */
.fc588-carte.dv620-carte { max-height: none; }
.dv620-carte .fc620-l2 { flex-wrap: wrap; row-gap: 3px; }
/* ch.621 — « ✍ Signé le JJ/MM » à côté de « Facturé » : la ligne du statut passe à la ligne quand la colonne manque de place (⛔ jamais une puce poussée hors de la colonne) */
.dv620-carte .fc620-l1 { flex-wrap: wrap; row-gap: 3px; }
.dv621-signe { flex: 0 0 auto; }
.dv620-carte .dv-signe-pastille, .dv620-carte .fc620-l2 > div { margin-top: 0 !important; }
.dv620-date { font-size: 11px; color: #64748B; }
.dv620-envoi { font-size: 10px; color: #64748B; }

/* ── ≤ 900 px : la zone état reste sur 2 lignes, les badges passent à la ligne proprement ── */
@media (max-width: 900px) {
  .fc620-l2 { flex-wrap: wrap; row-gap: 3px; }
  /* la zone état peut faire 2 lignes ⇒ pastille et montant s'alignent EN HAUT de leur rangée (⛔ la pastille ne remonte pas au-dessus du montant) */
  .fc588-carte .fc588-etat.fc620-etat { justify-content: flex-start; align-self: start; }
  .fc588-carte:has(.fc620-etat) .fc588-montants { align-self: start; }
  .fc620-badge { white-space: normal; max-width: 100%; text-align: left; }   /* un badge long passe à la ligne DANS sa colonne, ⛔ jamais coupé */
}
/* ── ≤ 600 px : badges tactiles (bulle au toucher), comme les puces du ch.588 ── */
@media (max-width: 600px) {
  .fc620-badge { min-height: 44px; padding: 0 10px; border-radius: 12px; font-size: 11px; }
  .fc588-etat.fc620-etat { width: 100%; }
  .dv620-carte .fc588-actions .dv-btn3d, .dv620-carte .fc588-actions button { min-height: 44px; min-width: 44px; }
}