/* =========================================================
   LesVacantes — bloc « réservation »
   Encart Résumé de la demande + échéancier des paiements.
   Vues propriétaire et locataire (mêmes classes, libellés
   et lignes différents côté PHP).

   Tout est scopé sous .lv-resume / .lv-sched.
   Un seul fichier à charger.
   ========================================================= */

.lv-resume{
  --lvr-green:#4F6E5A;
  --lvr-green-dk:#3B5544;
  --lvr-green-soft:#EEF3EF;
  --lvr-ink:#181818;
  --lvr-muted:#77857C;
  --lvr-line:#E6EAE7;
  --lvr-minus:#A8643F;

  font-family:'Nunito',sans-serif;
  color:var(--lvr-ink);
}

/* neutralise les marges héritées du thème */
.lv-resume p,
.lv-resume ul,
.lv-resume li{margin:0;padding:0;list-style:none}
/* le thème force color:#fff sur b/strong (utile sur ses fonds sombres) */
.lv-resume b,
.lv-resume strong{color:inherit}

/* titre de l'encart (reprend le h4 existant) */
.lv-resume__heading{
  font-size:18px;
  font-weight:500;
  color:var(--lvr-green);
  margin:0 0 14px;
  line-height:1.3;
}

/* ---------------------------------------------------------
   NIVEAU 0 — visuel de l'annonce
   --------------------------------------------------------- */
.lv-resume__media{
  position:relative;
  margin:0 0 16px;
  border-radius:12px;
  overflow:hidden;
  background:var(--lvr-green-soft);
  aspect-ratio:16 / 7;          /* bandeau bas, ne mange pas la carte */
}
.lv-resume__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;               /* le radius est porté par le conteneur */
}
/* voile en bas de l'image pour que la pastille reste lisible */
.lv-resume__media::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:52%;
  background:linear-gradient(to top,rgba(24,24,24,.34),rgba(24,24,24,0));
  pointer-events:none;
}
/* pastille de statut posée sur l'image */
.lv-resume__media .lv-resume__badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  box-shadow:0 1px 6px rgba(24,24,24,.14);
}
/* image absente : bloc neutre au lieu d'un trou */
.lv-resume__media--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:var(--lvr-green);
  opacity:.7;
}

/* ---------------------------------------------------------
   NIVEAU 1 — logement + statut
   --------------------------------------------------------- */
.lv-resume__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.lv-resume__title{
  font-size:19px;
  font-weight:700;
  line-height:1.3;
  color:var(--lvr-ink);
}
.lv-resume__badge{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.4;
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
  background:#F0F0EE;
  color:#6E6E6E;
  border:1px solid #E2E2DF;
}
.lv-resume__badge--ok{background:var(--lvr-green-soft);color:var(--lvr-green-dk);border-color:#D6E3DA}
.lv-resume__badge--wait{background:#FDF6E7;color:#8A6A24;border-color:#F0E4C6}
.lv-resume__badge--ko{background:#FBEFEC;color:#96503C;border-color:#F0DBD4}

.lv-resume__place{
  margin-top:5px;
  font-size:13.5px;
  color:var(--lvr-muted);
  line-height:1.5;
}
.lv-resume__people{
  margin-top:10px;
  font-size:15px;
  line-height:1.5;
}
.lv-resume__people strong{font-weight:700}

/* ---------------------------------------------------------
   NIVEAU 2 — période
   --------------------------------------------------------- */
.lv-resume__dates{
  margin-top:16px;
  padding:14px 16px;
  background:var(--lvr-green-soft);
  border-radius:12px;
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.lv-resume__range{
  font-size:16px;
  font-weight:700;
  color:var(--lvr-green-dk);
}
.lv-resume__duration{
  font-size:14px;
  color:var(--lvr-green);
  opacity:.85;
}

/* ---------------------------------------------------------
   NIVEAU 3 — les montants
   --------------------------------------------------------- */
.lv-resume__money{
  margin-top:18px;
  border-top:1px solid var(--lvr-line);
  padding-top:16px;
}
.lv-resume__row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:7px 0;
  font-size:15px;
}
.lv-resume__lbl{color:var(--lvr-muted)}
.lv-resume__val{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  white-space:nowrap;
}
.lv-resume__row--sub .lv-resume__lbl,
.lv-resume__row--sub .lv-resume__val{
  font-size:13.5px;
  color:var(--lvr-muted);
  font-weight:400;
}
.lv-resume__row--rule{
  border-top:1px solid var(--lvr-line);
  margin-top:8px;
  padding-top:12px;
}
.lv-resume__row--minus .lv-resume__val{color:var(--lvr-minus)}

.lv-resume__row--total{
  margin-top:10px;
  padding:14px 16px;
  background:var(--lvr-green);
  border-radius:12px;
}
.lv-resume__row--total .lv-resume__lbl{
  color:rgba(255,255,255,.82);
  font-size:14px;
  font-weight:600;
}
.lv-resume__row--total .lv-resume__val{
  color:#fff;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.01em;
}

/* pied : horodatage */
.lv-resume__foot{
  margin-top:14px;
  font-size:12.5px;
  color:var(--lvr-muted);
  line-height:1.6;
}
.lv-resume__foot span + span::before{
  content:"·";
  margin:0 7px;
  opacity:.6;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */
@media (max-width:480px){
  .lv-resume__media{aspect-ratio:16 / 9}
  .lv-resume__title{font-size:17px}
  .lv-resume__row--total .lv-resume__val{font-size:23px}
}

/* ---------------------------------------------------------
   Impression / PDF
   --------------------------------------------------------- */
@media print{
  .lv-resume__media{aspect-ratio:16 / 6}
  .lv-resume__media::after{display:none}
  .lv-resume__row--total{background:#fff;border:1.5px solid var(--lvr-green);padding:10px 12px}
  .lv-resume__row--total .lv-resume__lbl,
  .lv-resume__row--total .lv-resume__val{color:var(--lvr-green-dk)}
  .lv-resume__dates{background:#fff;border:1px solid var(--lvr-line)}
}


.lv-sched{
  --lvs-green:#4F6E5A;
  --lvs-green-dk:#3B5544;
  --lvs-green-soft:#EEF3EF;
  --lvs-ink:#181818;
  --lvs-muted:#77857C;
  --lvs-line:#E6EAE7;
  --lvs-line-soft:#F1F4F2;
  --lvs-minus:#A8643F;

  font-family:'Nunito',sans-serif;
  color:var(--lvs-ink);
}

/* le thème force color:#fff sur b/strong (utile sur ses fonds sombres) */
.lv-sched b,
.lv-sched strong{color:inherit}
.lv-sched p{margin:0;padding:0}

.lv-sched__heading{
  font-size:18px;
  font-weight:500;
  color:var(--lvs-green);
  margin:0 0 4px;
  line-height:1.3;
}
.lv-sched__intro{
  margin:0 0 16px !important;
  font-size:13.5px;
  color:var(--lvs-muted);
  line-height:1.5;
}

/* ---------------------------------------------------------
   Une échéance
   --------------------------------------------------------- */
.lv-sched__item{
  border:1px solid var(--lvs-line);
  border-radius:12px;
  margin-bottom:8px;
  overflow:hidden;
  background:#fff;
}
.lv-sched__item[open]{border-color:#D6E3DA}

/* la ligne repliée */
.lv-sched__sum{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;            /* masque le triangle par défaut */
  -webkit-tap-highlight-color:transparent;
}
.lv-sched__sum::-webkit-details-marker{display:none}
.lv-sched__sum::marker{content:""}
.lv-sched__item[open] .lv-sched__sum{background:var(--lvs-green-soft)}
.lv-sched__sum:hover{background:#FAFBFA}
.lv-sched__item[open] .lv-sched__sum:hover{background:var(--lvs-green-soft)}
.lv-sched__sum:focus-visible{outline:2px solid var(--lvs-green);outline-offset:-2px}

.lv-sched__when{flex:1;min-width:0}
.lv-sched__date{
  display:block;
  font-weight:700;
  font-size:14.5px;
  line-height:1.3;
  color:var(--lvs-ink);
}
.lv-sched__meta{
  display:block;
  margin-top:1px;
  font-size:12px;
  color:var(--lvs-muted);
}
/* état, en texte pour rester compact sur colonne étroite */
.lv-sched__state--paid{color:var(--lvs-green);font-weight:700}
.lv-sched__state--due{color:var(--lvs-muted)}
.lv-sched__state--late{color:var(--lvs-minus);font-weight:700}

.lv-sched__net{
  font-weight:800;
  font-size:15.5px;
  color:var(--lvs-green-dk);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.lv-sched__chev{
  width:14px;height:14px;
  flex:none;
  color:var(--lvs-muted);
  transition:transform .18s ease;
}
.lv-sched__item[open] .lv-sched__chev{transform:rotate(90deg)}

/* mention « prorata final » */
.lv-sched__tag{
  display:inline-block;
  margin-left:6px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:1px 6px;
  border-radius:999px;
  background:var(--lvs-green-soft);
  color:var(--lvs-green-dk);
  vertical-align:1px;
}

/* le détail */
.lv-sched__det{
  padding:6px 14px 12px;
  border-top:1px solid var(--lvs-line-soft);
}
.lv-sched__row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding:6px 0;
  font-size:13.5px;
}
.lv-sched__row .lv-sched__lbl{color:var(--lvs-muted)}
.lv-sched__row .lv-sched__val{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  white-space:nowrap;
}
.lv-sched__row--fees .lv-sched__val{color:var(--lvs-minus)}

/* ---------------------------------------------------------
   Total
   --------------------------------------------------------- */
.lv-sched__total{
  margin-top:12px;
  background:var(--lvs-green-soft);
  border-radius:12px;
  padding:13px 15px;
}
.lv-sched__total-lab{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--lvs-green-dk);
  padding-bottom:8px;
  border-bottom:1px solid #DCE6E0;
  margin:0 0 6px !important;
}
.lv-sched__total .lv-sched__lbl{color:var(--lvs-green)}
.lv-sched__row--net{padding-top:8px}
.lv-sched__row--net .lv-sched__lbl{
  color:var(--lvs-green-dk) !important;
  font-weight:700;
  font-size:14px;
}
.lv-sched__row--net .lv-sched__val{
  font-size:18px;
  font-weight:800;
  color:var(--lvs-green-dk);
}

.lv-sched__note{
  margin:12px 0 0 !important;
  font-size:12.5px;
  line-height:1.6;
  color:var(--lvs-muted);
}

/* ---------------------------------------------------------
   Large : on aère un peu, la ligne reste la même
   --------------------------------------------------------- */
@media (min-width:900px){
  .lv-sched__sum{padding:14px 18px}
  .lv-sched__date{font-size:15.5px}
  .lv-sched__net{font-size:16.5px}
  .lv-sched__det{padding:8px 18px 14px}
  .lv-sched__row{font-size:14px}
}

/* ---------------------------------------------------------
   Impression / PDF : tout est déplié
   --------------------------------------------------------- */
@media print{
  .lv-sched__item{page-break-inside:avoid;margin-bottom:6px}
  .lv-sched__item .lv-sched__det{display:block !important}
  .lv-sched__chev{display:none}
  .lv-sched__item[open] .lv-sched__sum{background:transparent}
  .lv-sched__total{background:transparent;border:1.5px solid var(--lvs-green)}
}

/* =========================================================
   Garde-fous vis-à-vis du thème
   ---------------------------------------------------------
   Le thème passe le texte en blanc au survol des boutons
   (#content button:hover, .vact_iconlink:hover *, …) et force
   color:#fff sur b/strong. Nos lignes ne sont pas des <button>,
   mais on fige les couleurs pour qu'aucun texte ne puisse
   devenir blanc sur blanc.
   ========================================================= */

.lv-sched__sum:hover,
.lv-sched__sum:focus,
.lv-sched__sum:hover .lv-sched__date,
.lv-sched__sum:focus .lv-sched__date{color:var(--lvs-ink)}

.lv-sched__sum:hover .lv-sched__meta,
.lv-sched__sum:hover .lv-sched__chev,
.lv-sched__sum:hover .lv-sched__state--due{color:var(--lvs-muted)}

.lv-sched__sum:hover .lv-sched__net,
.lv-sched__sum:hover .lv-sched__tag{color:var(--lvs-green-dk)}
.lv-sched__sum:hover .lv-sched__state--paid{color:var(--lvs-green)}
.lv-sched__sum:hover .lv-sched__state--late{color:var(--lvs-minus)}

.lv-sched__item:hover .lv-sched__lbl{color:var(--lvs-muted)}
.lv-sched__item:hover .lv-sched__val{color:var(--lvs-ink)}
.lv-sched__item:hover .lv-sched__row--fees .lv-sched__val{color:var(--lvs-minus)}

.lv-resume:hover .lv-resume__lbl{color:var(--lvr-muted)}
.lv-resume:hover .lv-resume__val{color:var(--lvr-ink)}
.lv-resume:hover .lv-resume__row--minus .lv-resume__val{color:var(--lvr-minus)}
.lv-resume__row--total:hover .lv-resume__lbl{color:rgba(255,255,255,.82)}
.lv-resume__row--total:hover .lv-resume__val{color:#fff}
.lv-resume__media:hover .lv-resume__badge{color:#6E6E6E}
.lv-resume__media:hover .lv-resume__badge--ok{color:var(--lvr-green-dk)}
