/* Vitrine publique de l'hôte (/profil/<adresse>) : application mobile d'abord, aérée,
   grandes photos, peu de texte. Charte Hostpay : vert pour l'action, rose pour la caution. */

:root {
  --vert: #06d6a0; --vert-fonce: #05c490; --vert-encre: #047857; --vert-clair: #e3faf3;
  --rose: #ec4899; --encre: #111827; --gris-7: #374151; --gris-5: #6b7280; --gris-4: #9ca3af;
  --gris-3: #d1d5db; --trait: #eef0f2; --fond: #f7f8fa;
  --ombre: 0 1px 2px rgba(17, 24, 39, 0.05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.vt { margin: 0; background: var(--fond); color: var(--encre); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
:where(.vt) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.vt) a { color: inherit; text-decoration: none; }
:where(.vt) svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.vt [hidden] { display: none !important; }
.vt-page { max-width: 64rem; margin: 0 auto; padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem 2rem; }

/* --- Hôte ---------------------------------------------------------------- */
.vt-hote { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.vt-avatar { width: 4.25rem; height: 4.25rem; border-radius: 999px; overflow: hidden; flex-shrink: 0; background: var(--encre); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 800; }
.vt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vt-avatar--mini { width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; }
.vt-hote-nom { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.vt-hote-sous { margin: 0.35rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--gris-5); }

/* --- Recherche ------------------------------------------------------------ */
.vt-recherche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.vt-champ { display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.8rem 0.9rem; border-radius: 1.125rem; background: #fff; box-shadow: var(--ombre); text-align: left; }
.vt-champ-ico { color: var(--vert); }
.vt-champ-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vt-champ-txt small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gris-4); }
.vt-champ-txt b { font-size: 0.9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-pas { display: inline-flex; gap: 0.3rem; }
.vt-pas button { width: 1.875rem; height: 1.875rem; border-radius: 999px; background: #f3f4f6; font-size: 1.125rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.vt-pas button:disabled { opacity: 0.35; }
.vt-filtres { display: flex; gap: 0.5rem; margin: 0.875rem -1.25rem 0; padding: 0 1.25rem 0.25rem; overflow-x: auto; scrollbar-width: none; }
.vt-filtres::-webkit-scrollbar { display: none; }
.vt-filtre { border: 1px solid #eceef1 !important; display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; padding: 0.55rem 0.9rem 0.55rem 0.7rem; border-radius: 999px; background: #fff; box-shadow: var(--ombre); font-size: 0.8125rem; font-weight: 700; color: var(--encre); transition: background 0.15s ease, color 0.15s ease; }
.vt-filtre svg { width: 1.05rem; height: 1.05rem; color: var(--vert-encre); }
.vt-filtre[aria-pressed="true"] { background: var(--encre); color: #fff; }
.vt-filtre[aria-pressed="true"] svg { color: var(--vert); }
.vt-compte { margin: 1.75rem 0.125rem 0.875rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }

/* --- Cartes des logements ------------------------------------------------- */
.vt-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.vt-carte-lien { display: block; position: relative; -webkit-tap-highlight-color: transparent; }
.vt-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 1.375rem; aspect-ratio: 4 / 3; background: #e9ecef; }
.vt-photos::-webkit-scrollbar { display: none; }
.vt-photos img, .vt-photos .vt-photo-vide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.vt-photo-vide { display: flex; align-items: center; justify-content: center; color: #c4c8cf; }
.vt-photo-vide svg { width: 2.25rem; height: 2.25rem; }
.vt-points { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; justify-content: center; gap: 0.3rem; padding-bottom: 0.75rem; pointer-events: none; }
.vt-points i { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: rgba(255, 255, 255, 0.6); transition: background 0.15s ease, transform 0.15s ease; }
.vt-points i.on { background: #fff; transform: scale(1.25); }
.vt-carte-bas { padding: 0.875rem 0.25rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.vt-carte-nom { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.vt-carte-lieu { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--gris-5); }
.vt-capa { display: flex; gap: 0.875rem; margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 700; color: var(--gris-7); }
.vt-capa span { display: inline-flex; align-items: center; gap: 0.3rem; }
.vt-capa svg { width: 1rem; height: 1rem; color: var(--gris-4); }
.vt-prix { margin: 0.4rem 0 0; font-size: 0.9375rem; color: var(--gris-5); }
.vt-prix b { font-weight: 800; color: var(--encre); }
.vt-prix .vt-prix-total { color: var(--vert-encre); font-weight: 700; }
.vt-carte.est-masque { display: none; }
.vt-aucun { margin: 1rem 0.25rem; font-size: 0.9375rem; color: var(--gris-5); }

/* --- Fiche d'un logement --------------------------------------------------- */
.vt-page--bien { padding-top: max(0.75rem, env(safe-area-inset-top)); padding-bottom: 7rem; }
.vt-haut { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; }
.vt-retour { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: #fff; box-shadow: var(--ombre); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vt-hote-mini { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.875rem; font-weight: 700; }
.vt-hote-mini > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-avatar--duo { margin-left: -0.95rem; box-shadow: 0 0 0 2px var(--fond); }
.vt-galerie { position: relative; margin: 0 -1.25rem; }
.vt-galerie-defil { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3; background: #e9ecef; }
.vt-galerie-defil::-webkit-scrollbar { display: none; }
.vt-galerie-defil img, .vt-galerie-defil .vt-photo-vide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; }
.vt-galerie-compteur { position: absolute; right: 1.25rem; bottom: 0.875rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgba(17, 24, 39, 0.65); color: #fff; font-size: 0.75rem; font-weight: 700; }
.vt-bien { display: flex; flex-direction: column; }
.vt-bien-nom { margin: 1.25rem 0 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.vt-bien-lieu { display: flex; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--gris-5); }
.vt-bien-lieu svg { width: 1rem; height: 1rem; color: var(--vert); }
.vt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.5rem; }
.vt-stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.875rem 0.25rem; border-radius: 1.125rem; background: #fff; box-shadow: var(--ombre); }
.vt-stat svg { width: 1.375rem; height: 1.375rem; color: var(--vert); margin-bottom: 0.25rem; }
.vt-stat b { font-size: 1.125rem; font-weight: 800; line-height: 1.1; }
.vt-stat span { font-size: 0.75rem; font-weight: 600; color: var(--gris-5); }
.vt-titre { margin: 2.25rem 0 0.875rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.vt-equips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vt-equip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.85rem 0.55rem 0.7rem; border-radius: 999px; background: #fff; box-shadow: var(--ombre); font-size: 0.8125rem; font-weight: 600; }
.vt-equip svg { width: 1.05rem; height: 1.05rem; color: var(--vert-encre); }
.vt-plus { margin-top: 0.75rem; }
.vt-plus summary, .vt-desc-plus { list-style: none; cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--vert-encre); }
.vt-plus summary::-webkit-details-marker, .vt-desc summary::-webkit-details-marker { display: none; }
.vt-plus[open] summary { margin-bottom: 0.75rem; }
.vt-desc summary { list-style: none; cursor: pointer; }
.vt-desc-debut { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--gris-7); }
.vt-desc-plus { display: inline-block; margin-top: 0.5rem; }
.vt-desc[open] summary { display: none; }
.vt-desc-tout { font-size: 0.9375rem; line-height: 1.65; color: var(--gris-7); }

/* --- Réservation ------------------------------------------------------------ */
.vt-resa { margin-top: 2.25rem; padding: 1.25rem; border-radius: 1.5rem; background: #fff; box-shadow: 0 20px 45px -25px rgba(17, 24, 39, 0.3); display: flex; flex-direction: column; gap: 0.875rem; scroll-margin-top: 1rem; }
.vt-resa-prix { margin: 0; font-size: 0.9375rem; color: var(--gris-5); }
.vt-resa-prix b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--encre); }
.vt-resa-dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--trait); border-radius: 1rem; overflow: hidden; text-align: left; }
.vt-resa-dates > span { display: flex; flex-direction: column; padding: 0.7rem 0.875rem; }
.vt-resa-dates > span + span { border-left: 1px solid var(--trait); }
.vt-resa-dates small, .vt-resa-voy small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gris-4); }
.vt-resa-dates b, .vt-resa-voy b { font-size: 0.9375rem; font-weight: 700; }
.vt-resa-voy { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.875rem; border: 1px solid var(--trait); border-radius: 1rem; }
.vt-resa-voy > span:first-child { display: flex; flex-direction: column; }
.vt-detail { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0.125rem; }
.vt-ligne { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; color: var(--gris-7); }
.vt-ligne--total { padding-top: 0.75rem; border-top: 1px solid var(--trait); font-size: 1.0625rem; font-weight: 800; color: var(--encre); }
.vt-ligne--caution { font-size: 0.8125rem; color: var(--rose); font-weight: 600; }
.vt-indispo { margin: 0; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: #fff4ea; font-size: 0.875rem; font-weight: 600; color: #c2410c; }
.vt-form { display: flex; flex-direction: column; gap: 0.6rem; }
.vt-input { width: 100%; padding: 0.8rem 0.95rem; border: 1px solid var(--trait); border-radius: 0.875rem; background: #fff; font: inherit; font-size: 16px; color: var(--encre); }
.vt-input:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.15); }
textarea.vt-input { resize: vertical; min-height: 4.5rem; }
.vt-bouton { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.95rem 1.25rem; border-radius: 999px; background: var(--vert); color: #fff !important; font-size: 1rem; font-weight: 800; box-shadow: 0 12px 24px -12px rgba(6, 214, 160, 0.9); transition: background 0.15s ease, transform 0.15s ease; }
.vt-bouton:hover { background: var(--vert-fonce); }
.vt-bouton:active { transform: scale(0.98); }
.vt-bouton:disabled { opacity: 0.6; }
.vt-erreur { margin: 0; font-size: 0.875rem; font-weight: 600; color: #c2410c; }
.vt-note { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.125rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--gris-5); }
.vt-note svg { width: 0.875rem; height: 0.875rem; margin-top: 0.1rem; color: var(--vert); }
.vt-merci { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 0.5rem 0; }
.vt-merci-ico { width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--vert-clair); color: var(--vert-encre); display: flex; align-items: center; justify-content: center; }
.vt-merci-ico svg { width: 1.75rem; height: 1.75rem; }
.vt-merci b { font-size: 1.125rem; font-weight: 800; }
.vt-merci p { margin: 0; font-size: 0.9375rem; color: var(--gris-5); line-height: 1.5; }

/* Barre du bas (téléphone) */
.vt-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--trait); transition: transform 0.2s ease; }
.vt-barre.est-cachee { transform: translateY(110%); }
.vt-barre p { margin: 0; font-size: 0.875rem; color: var(--gris-5); }
.vt-barre b { font-size: 1.125rem; font-weight: 800; color: var(--encre); }
.vt-bouton--barre { width: auto; padding: 0.8rem 1.6rem; }

/* --- Pied ---------------------------------------------------------------------- */
.vt-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); font-size: 0.75rem; font-weight: 600; color: var(--gris-4); }
.vt--bien .vt-pied { padding-bottom: 7rem; }
.vt-pied > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.vt-pied-ico { width: 0.875rem !important; height: 0.875rem !important; }
.vt-pied-logo { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 800; color: var(--encre) !important; }
.vt-logo-mark { width: 1.375rem; height: 1.375rem; border-radius: 0.45rem; background: var(--vert); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vt-logo-mark svg { width: 0.85rem; height: 0.85rem; }
.vt-logo-mark--grand { width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; }
.vt-logo-mark--grand svg { width: 1.75rem; height: 1.75rem; }
.vt-introuvable { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; }
.vt-introuvable h1 { margin: 1rem 0 0; font-size: 1.5rem; font-weight: 800; }
.vt-introuvable p { margin: 0; color: var(--gris-5); }

/* --- Feuille des dates ---------------------------------------------------------- */
.vt-voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(17, 24, 39, 0.45); animation: vt-fondu 0.18s ease; }
@keyframes vt-fondu { from { opacity: 0; } }
.vt-feuille { width: 100%; max-width: 28rem; max-height: 92vh; overflow-y: auto; padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); border-radius: 1.75rem 1.75rem 0 0; background: #fff; animation: vt-monte 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes vt-monte { from { transform: translateY(30px); opacity: 0.6; } }
.vt-poignee { display: block; width: 2.5rem; height: 0.3rem; margin: 0 auto 1rem; border-radius: 999px; background: #e5e7eb; }
.vt-feuille-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vt-feuille-tete b { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.vt-feuille-sous { margin: 0.25rem 0 1rem; font-size: 0.875rem; font-weight: 600; color: var(--gris-5); min-height: 1.3em; }
.vt-mois { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.vt-mois b { font-size: 1rem; font-weight: 800; }
.vt-mois button { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; }
.vt-mois button:disabled { opacity: 0.3; }
.vt-semaine, .vt-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vt-semaine span { text-align: center; padding-bottom: 0.4rem; font-size: 0.6875rem; font-weight: 700; color: var(--gris-4); }
.vt-jours { row-gap: 0.25rem; }
.vt-jour { position: relative; isolation: isolate; height: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; font-size: 0.9375rem; font-weight: 700; color: var(--encre); }
.vt-jour small { font-size: 0.625rem; font-weight: 600; color: var(--gris-4); }
.vt-jour.est-hors { visibility: hidden; }
.vt-jour:disabled { color: #d1d5db; cursor: default; }
.vt-jour:disabled small { color: #e5e7eb; }
.vt-jour.est-pris { color: #c4c8cf; text-decoration: line-through; }
.vt-jour.est-entre { background: var(--vert-clair); }
.vt-jour.est-debut, .vt-jour.est-fin { color: #fff; }
.vt-jour.est-debut::before, .vt-jour.est-fin::before { content: ''; position: absolute; inset: 0.15rem; border-radius: 999px; background: var(--encre); z-index: -1; }
.vt-jour.est-debut small, .vt-jour.est-fin small { color: rgba(255, 255, 255, 0.75); }
.vt-jour.est-debut.est-plage { background: linear-gradient(90deg, transparent 50%, var(--vert-clair) 50%); }
.vt-jour.est-fin { background: linear-gradient(90deg, var(--vert-clair) 50%, transparent 50%); }
.vt-jours { isolation: isolate; }
.vt-feuille-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.vt-effacer { font-size: 0.9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vt-feuille-bas .vt-bouton { width: auto; padding: 0.85rem 1.75rem; }

/* Photo agrandie */
.vt-zoom { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(17, 24, 39, 0.94); animation: vt-fondu 0.15s ease; cursor: zoom-out; }
.vt-zoom img { max-width: 100%; max-height: 100%; border-radius: 0.75rem; object-fit: contain; }

/* --- Ordinateur ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .vt-page { padding: 3rem 2rem 3rem; }
  .vt-hote { margin-bottom: 2.25rem; }
  .vt-avatar { width: 5rem; height: 5rem; }
  .vt-avatar--mini { width: 1.75rem; height: 1.75rem; }
  .vt-hote-nom { font-size: 2.25rem; }
  .vt-recherche { max-width: 36rem; }
  .vt-filtres { margin: 1rem 0 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .vt-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .vt-page--bien { padding-top: 1.5rem; padding-bottom: 3rem; }
  .vt-galerie { margin: 0; border-radius: 1.5rem; overflow: hidden; }
  .vt-galerie-defil { aspect-ratio: 16 / 7.5; }
  .vt-galerie-defil img { flex-basis: 66%; }
  .vt-bien { flex-direction: row; align-items: flex-start; gap: 3rem; }
  .vt-bien-contenu { flex: 1; min-width: 0; }
  .vt-bien-nom { font-size: 2rem; margin-top: 1.75rem; }
  .vt-resa { position: sticky; top: 1.5rem; width: 23rem; flex-shrink: 0; margin-top: 1.75rem; }
  .vt-barre { display: none; }
  .vt--bien .vt-pied { padding-bottom: 2rem; }
  .vt-voile { align-items: center; }
  .vt-feuille { border-radius: 1.75rem; }
  .vt-poignee { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) { .vt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Voyageurs : compteur compact à côté des dates */
.vt-champ--voy { gap: 0.6rem; }
.vt-champ--voy .vt-champ-txt { flex: none; min-width: 1rem; }
.vt-champ--voy .vt-champ-txt small { display: none; }

/* Faits du logement en une phrase (page de tous les logements) */
.vt-faits { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--gris-7); }
.vt-faits b { font-weight: 700; color: var(--encre); }
.vt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vt-bien-hotes { margin: 0.35rem 0 0; font-size: 0.9375rem; font-weight: 700; color: var(--encre); }