/* Pages de LES VILLAS (réservations, rapprochement). S'ajoute à style.css. */
:root { --credit: #1f7a4d; --debit: #9b2c3a; --attente: #eda100; }

.pastille { display: inline-block; min-width: 1.4em; padding: 0 0.4em; border-radius: 1em; background: var(--danger);
  color: #fff; font-size: 0.75rem; text-align: center; line-height: 1.4em; }
.mois-nav a { text-decoration: none; }
a.bouton { padding: 0.4rem 0.8rem; border-radius: 7px; background: var(--accent); color: #fff; text-decoration: none; font-size: 0.9rem; }

/* barre de rapprochement */
.barre { display: flex; height: 2.1rem; border-radius: 8px; overflow: hidden; margin: 0.4rem 0 0.6rem; font-size: 0.85rem; }
.barre .seg { display: flex; align-items: center; justify-content: center; color: #fff; white-space: nowrap; padding: 0 0.5rem; min-width: 5.5rem; }
.seg-rapproche { background: var(--ok); }
.seg-attente { background: var(--attente); color: #3b2a00 !important; }
.seg-a_traiter { background: var(--danger); }

/* statuts */
.tag.st-rapproche { background: #e9f6ef; color: var(--ok); }
.tag.st-attendu, .tag.attente { background: #fff4d6; color: #7a5600; }
.tag.st-historique { background: #eef1f5; color: var(--muted); }
td.du { color: var(--danger); font-weight: 600; }
td.trop { color: #7a5600; font-weight: 600; }
.credit { color: var(--credit); }
.debit { color: var(--debit); }

/* réservations */
tr.resa-ligne { cursor: pointer; }
tr.resa-ligne:hover td { background: var(--accent-soft); }
tr.resa-detail > td { background: #fafbfd; padding: 0.75rem 1rem 1rem; }
table.paiements { margin-bottom: 0.75rem; font-size: 0.9rem; }
details.saisie summary, details.modifier summary { cursor: pointer; }
details.modifier { margin-top: 0.6rem; }
.grille-saisie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem 0.8rem; align-items: end; margin-top: 0.8rem; }
.grille-saisie .large { grid-column: span 2; }
.grille-saisie .titre-saisie { grid-column: 1 / -1; }
.grille-saisie button { height: 2.35rem; }

/* à traiter */
.proposition { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.5rem; background: #fbfcfe; flex-wrap: wrap; }
.proposition > div:first-of-type { flex: 1 1 22rem; }
.proposition select, .proposition input { width: auto; margin: 0; }
.proposition .boutons { display: flex; gap: 0.5rem; }
.orpheline { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; margin-bottom: 0.75rem; }
.orph-tete { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.ligne-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.4rem; }
.ligne-actions input, .ligne-actions select { width: auto; margin: 0; padding: 0.35rem 0.5rem; font-size: 0.88rem; }
.ligne-actions input.motif { width: 11rem; font-family: ui-monospace, monospace; }
.ligne-actions label.checkbox { font-size: 0.82rem; }

/* dépenses */
table.depenses input { margin: 0; padding: 0.25rem 0.4rem; font-size: 0.88rem; border-color: transparent; background: transparent; }
table.depenses input:hover, table.depenses input:focus { border-color: var(--line); background: #fff; }

@media (max-width: 700px) {
  .grille-saisie .large { grid-column: auto; }
  .barre .seg { min-width: 0; font-size: 0.75rem; }
}

/* menu : neuf entrées, il doit pouvoir passer à la ligne sans déborder */
.topbar { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 0.2rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.topbar nav { gap: 0.4rem 1rem; }
td.right, th.right { white-space: nowrap; }
.paiements td:nth-child(2) { white-space: nowrap; }