/* GDS IMMO - Espace locataire (mobile d'abord) */
:root{ --vert:#16a34a; --vert-f:#0e7c38; --vert-c:#e3f6ea; --encre:#16202b; --gris:#5b6674; --bord:#e3e8ee; --fond:#eef2f0;
  --rouge:#b42318; --rouge-c:#fdecec; --bleu:#075985; --bleu-c:#e0f2fe; --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--fond); color:var(--encre); font-family:var(--police); font-size:15px; line-height:1.45; }
a{ color:var(--vert-f); }
.lp-haut{ position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:12px 16px;
  background:linear-gradient(135deg,#3f8f68,#2a6b4c); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.lp-logo{ color:#fff; text-decoration:none; font-weight:700; font-size:18px; }
.lp-logo small{ display:block; font-weight:500; font-size:12px; opacity:.85; }
.lp-sortie{ color:#fff; text-decoration:none; font-size:13px; font-weight:600; border:1px solid rgba(255,255,255,.5); border-radius:18px; padding:6px 12px; }
.lp-page{ max-width:720px; margin:0 auto; padding:16px 14px 8px; }
.lp-pied{ text-align:center; color:var(--gris); font-size:12px; padding:14px 10px 24px; }
.lp-boite, .lp-carte{ background:#fff; border:1px solid var(--bord); border-radius:14px; padding:18px 16px; box-shadow:0 1px 3px rgba(16,24,40,.07); margin-bottom:14px; }
.lp-boite{ max-width:440px; margin:10px auto; }
h1{ font-size:22px; margin:0 0 6px; } h2{ font-size:17px; margin:0 0 12px; }
.lp-intro{ color:var(--gris); margin:0 0 16px; }
form{ display:flex; flex-direction:column; gap:12px; }
label{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:14px; }
label small{ font-weight:400; color:var(--gris); }
input{ font:inherit; font-size:16px; padding:11px 12px; border:1px solid #cfd8d3; border-radius:10px; background:#fff; width:100%; }
input:focus{ outline:none; border-color:var(--vert); box-shadow:0 0 0 3px var(--vert-c); }
button{ font:inherit; font-weight:700; font-size:16px; padding:12px 16px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--vert),var(--vert-f));
  color:#fff; cursor:pointer; box-shadow:0 2px 8px rgba(22,163,74,.25); }
button:disabled{ background:#cfd8d3; box-shadow:none; cursor:not-allowed; }
.lp-liens{ text-align:center; margin:14px 0 0; font-size:14px; }
.lp-aide{ margin-top:16px; background:var(--bleu-c); color:var(--bleu); border-radius:10px; padding:12px 14px; font-size:14px; }
.lp-erreur{ background:var(--rouge-c); color:var(--rouge); border-radius:10px; padding:10px 12px; font-size:14px; margin:0 0 12px; }
.lp-succes{ background:var(--vert-c); color:var(--vert-f); border-radius:10px; padding:10px 12px; font-size:14px; margin:8px 0; }
.lp-bonjour h1{ margin:4px 2px 12px; }
.lp-situation{ border-left:6px solid var(--vert); }
.lp-situation.retard{ border-left-color:var(--rouge); } .lp-situation.avance{ border-left-color:#0e7490; }
.lp-etiquette{ margin:0 0 4px; font-size:13px; color:var(--gris); font-weight:600; }
.lp-statut{ margin:0; font-size:16px; font-weight:700; }
.lp-situation.retard .lp-statut, .lp-situation.retard .lp-montant{ color:var(--rouge); }
.lp-situation.ajour .lp-statut{ color:var(--vert-f); }
.lp-montant{ margin:2px 0 6px; font-size:32px; font-weight:800; letter-spacing:-.5px; }
.lp-montant small{ font-size:14px; font-weight:600; color:var(--gris); }
.lp-detail{ margin:4px 0; color:var(--gris); font-size:14px; }
.lp-payer{ width:100%; margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.lp-payer small{ font-weight:500; font-size:12px; }
.lp-infos{ display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0 0 14px; font-size:14px; }
.lp-infos dt{ color:var(--gris); } .lp-infos dd{ margin:0; font-weight:600; text-align:right; }
.lp-bouton-sec{ display:block; text-align:center; padding:11px; border:1.5px solid var(--vert); border-radius:10px; font-weight:700; text-decoration:none; }
.lp-paiements{ list-style:none; margin:0; padding:0; }
.lp-paiements li{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--bord); }
.lp-paiements li:last-child{ border-bottom:0; }
.lp-p-txt{ display:flex; flex-direction:column; min-width:0; }
.lp-p-txt b{ font-size:14px; font-weight:600; }
.lp-p-txt small{ color:var(--gris); font-size:12px; }
.lp-p-penalite{ color:var(--rouge); font-weight:600; }
.lp-p-droite{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; white-space:nowrap; }
.lp-recu{ font-size:12px; font-weight:700; text-decoration:none; background:var(--vert-c); padding:3px 9px; border-radius:12px; }
.lp-gris{ color:var(--gris); } .lp-petit{ font-size:13px; }
.lp-mdp summary{ cursor:pointer; font-weight:700; color:var(--vert-f); padding:6px 0; }
.lp-mdp form{ margin-top:10px; }
@media (min-width:700px){ .lp-page{ padding-top:24px; } .lp-montant{ font-size:36px; } }

/* Plusieurs contrats + historique du loyer */
.lp-sommaire{ border-left:6px solid var(--vert); }
.lp-sommaire-liste{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lp-sommaire-liste a{ text-decoration:none; color:var(--encre); font-weight:600; font-size:14px; }
.lp-sommaire-liste small{ font-weight:400; color:var(--gris); }
.lp-badge-bail{ display:inline-block; margin-left:8px; font-size:11px; font-weight:700; background:#e0f2fe; color:var(--bleu); border-radius:10px; padding:2px 8px; vertical-align:middle; }
.lp-souscarte{ margin:16px 0 8px; font-size:13px; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; }
.lp-histo{ list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--bord); display:flex; flex-direction:column; gap:8px; }
.lp-histo li{ position:relative; font-size:13px; color:var(--gris); display:flex; flex-wrap:wrap; gap:0 6px; }
.lp-histo li::before{ content:""; position:absolute; left:-19px; top:4px; width:9px; height:9px; border-radius:50%; background:#cfd8d3; }
.lp-histo li.actif::before{ background:var(--vert); box-shadow:0 0 0 3px var(--vert-c); }
.lp-histo li b{ color:var(--encre); } .lp-histo li.actif b{ color:var(--vert-f); }

/* ---------------------------------------------------------------------
   MESSAGERIE (fils de discussion agent / locataire)
   --------------------------------------------------------------------- */
.v-msg-liste{ display:flex; flex-direction:column; gap:2px; }
.v-msg-ligne{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--bord); text-decoration:none; color:inherit; }
.v-msg-ligne:last-child{ border-bottom:none; }
.v-msg-ligne-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.v-msg-ligne-txt b{ font-size:14px; }
.v-msg-ligne-txt span{ font-size:13px; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.v-msg-badge{ background:var(--rouge-c); color:var(--rouge); font-size:12px; font-weight:700; border-radius:10px; padding:2px 8px; flex-shrink:0; }
.v-msg-fil-entete h2{ margin:0 0 4px; font-size:18px; }
.v-msg-conversation{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.v-msg-bulle{ max-width:82%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.4; }
.v-msg-bulle-meta{ display:block; font-size:11px; margin-top:4px; opacity:.7; }
.v-msg-bulle.agent{ align-self:flex-start; background:var(--fond); border:1px solid var(--bord); border-bottom-left-radius:4px; }
.v-msg-bulle.locataire{ align-self:flex-end; background:var(--vert); color:#fff; border-bottom-right-radius:4px; }
.v-msg-repondre textarea{ width:100%; box-sizing:border-box; min-height:70px; border:1px solid var(--bord); border-radius:10px; padding:10px 12px; font-family:var(--police); font-size:14px; resize:vertical; }
.v-msg-envoyer-btn{ margin-top:10px; width:100%; padding:11px; border:none; border-radius:10px; background:var(--vert); color:#fff; font-weight:700; font-size:14px; cursor:pointer; }
.v-msg-envoyer-btn:hover{ background:var(--vert-f); }

/* Pagination de l'historique des paiements */
.lp-pagination{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; font-size:14px; }
.lp-pagination small{ color:var(--gris); text-align:center; }
.lp-pagination a{ font-weight:700; text-decoration:none; }