/* =====================================================================
   « Mon espace » — tableau de bord connecté (Guide Voyageur).
   Réutilise les variables de style.css (--pink, --navy, --pink-dark).
   ===================================================================== */

.espace-shell {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(241, 62, 124, 0.10), transparent 60%),
    linear-gradient(180deg, #f7f8fc 0%, #eef1f8 100%);
  background-color: #f5f6fb;
  color: var(--navy, #101b35);
  display: flex;
  flex-direction: column;
}

/* ---------- En-tête (chrome d'app, sobre) ---------- */
.espace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(18px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(16, 27, 53, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}
.espace-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy, #101b35);
}
.espace-brand .brand-mark {
  width: 30px;
  height: 34px;
  fill: var(--pink, #f13e7c);
}
/* Logo lockup Staylaro (cigogne + mot-symbole) dans l'en-tête des espaces. */
.espace-brand .brand-logo {
  height: 34px;
  width: auto;
  display: block;
  border-radius: 0;
  flex: 0 0 auto;
}
.espace-brand .brand-name {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-weight: 700;
}
.espace-brand .brand-name strong {
  font-size: 1.05rem;
}
.espace-brand .brand-name span {
  font-size: 0.78rem;
  color: var(--pink, #f13e7c);
  letter-spacing: 0.3px;
}
.espace-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.espace-back {
  color: var(--navy, #101b35);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  opacity: 0.75;
}
.espace-back:hover {
  opacity: 1;
  color: var(--pink-dark, #d92868);
}

/* ---------- Contenu ---------- */
.espace-main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 48px) 72px;
}
/* Variante resserrée (liste d'annonces tant qu'il y en a peu). */
.espace-main--narrow {
  max-width: 1040px;
}
.espace-intro h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin: 0 0 8px;
}
.espace-intro p {
  margin: 0;
  font-size: 1.05rem;
  opacity: 0.75;
}

/* ---------- Grille des espaces (cartes par rôle) ---------- */
.espace-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.espace-card {
  background: #ffffff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 14px 34px rgba(16, 27, 53, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.espace-card-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark, #d92868);
  background: rgba(241, 62, 124, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
}
.espace-card h2 {
  font-size: 1.2rem;
  margin: 4px 0 0;
}
.espace-card p {
  margin: 0 0 6px;
  opacity: 0.72;
  font-size: 0.96rem;
  flex: 1;
}
.espace-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Boutons ---------- */
.espace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.espace-btn--primary {
  background: var(--pink, #f13e7c);
  color: #fff;
}
.espace-btn--primary:hover {
  background: var(--pink-dark, #d92868);
}
.espace-btn--soon {
  background: rgba(16, 27, 53, 0.06);
  color: rgba(16, 27, 53, 0.5);
  cursor: default;
  font-weight: 600;
}
.espace-btn--outline {
  background: transparent;
  color: var(--pink-dark, #d92868);
  box-shadow: inset 0 0 0 2px var(--pink, #f13e7c);
}
.espace-btn--outline:hover {
  background: var(--pink, #f13e7c);
  color: #fff;
}
/* Sur écran tactile, l'état :hover reste « collé » après un appui (le bouton
   Annuler restait rose). On ne remplit au survol que sur les appareils qui ont
   un vrai survol (souris). */
@media (hover: none) {
  .espace-btn--outline:hover {
    background: transparent;
    color: var(--pink-dark, #d92868);
  }
}

/* ---------- Note / état vide ---------- */
.espace-note {
  margin-top: 24px;
  padding: 18px 20px;
  background: rgba(241, 62, 124, 0.06);
  border: 1px dashed rgba(241, 62, 124, 0.35);
  border-radius: 14px;
  color: rgba(16, 27, 53, 0.7);
}

/* ---------- Cartes d'annonces (logements) ---------- */
.listing-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.listing-card {
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 26px rgba(16, 27, 53, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.listing-card h3 {
  margin: 0;
  font-size: 1.1rem;
}
.listing-loc {
  margin: 0;
  color: var(--pink-dark, #d92868);
  font-weight: 600;
  font-size: 0.92rem;
}
.listing-meta {
  margin: 2px 0 0;
  font-size: 0.88rem;
  opacity: 0.65;
}
.listing-desc {
  margin: 8px 0 0;
  font-size: 0.9rem;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-price {
  margin: 12px 0 0;
  font-size: 1.05rem;
}
.listing-price strong {
  color: var(--navy, #101b35);
  font-size: 1.2rem;
}
.listing-card--link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.listing-card--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(16, 27, 53, 0.13);
}

/* ---------- Gestion des photos ---------- */
.photos {
  margin-top: 28px;
}
.photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.photos-head h2 {
  margin: 0;
  font-size: 1.2rem;
}
.photos-add {
  cursor: pointer;
}
.photos-note {
  margin: 6px 0 0;
  font-size: 0.85rem;
  opacity: 0.6;
}
.photos-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.photo-item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(16, 27, 53, 0.06);
}
.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-cover {
  position: absolute;
  left: 8px;
  top: 8px;
  background: var(--pink, #f13e7c);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.photo-del {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 27, 53, 0.72);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-del:hover {
  background: var(--pink-dark, #d92868);
}

/* ---------- Réordonnancement des photos (glisser-déposer) ---------- */
.photos-reorder-hint {
  opacity: 0.75;
}
.photo-item--draggable {
  cursor: grab;
}
.photo-item--draggable:active {
  cursor: grabbing;
}
.photo-item--dragging {
  opacity: 0.4;
}
.photo-item--over {
  outline: 3px solid var(--pink, #f13e7c);
  outline-offset: -3px;
}
/* Cadre discret + numéro implicite pour la photo d'accroche */
.photo-item--cover {
  outline: 2px solid var(--pink, #f13e7c);
  outline-offset: -2px;
}
.photo-moves {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}
.photo-move {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 27, 53, 0.72);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-move:hover:not(:disabled) {
  background: var(--pink, #f13e7c);
}
.photo-move:disabled {
  opacity: 0.35;
  cursor: default;
}
/* Les flèches ne servent qu'en tactile (le glisser-déposer natif n'y marche pas).
   Sur souris/desktop, on s'appuie sur le drag-and-drop → flèches masquées. */
@media (hover: hover) and (pointer: fine) {
  .photo-moves {
    display: none;
  }
}

/* ---------- Actions de la page de gestion ---------- */
.manage-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---------- Calendrier (dispos + prix au jour) ---------- */
.cal {
  margin-top: 20px;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 18px;
  padding: 20px clamp(14px, 2.5vw, 24px);
  box-shadow: 0 12px 30px rgba(16, 27, 53, 0.07);
}
.cal-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
}
.cal-month {
  font-size: 1.1rem;
  text-transform: capitalize;
  min-width: 180px;
  text-align: center;
}
.cal-nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(16, 27, 53, 0.15);
  background: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--navy, #101b35);
}
.cal-nav:hover {
  border-color: var(--pink, #f13e7c);
  color: var(--pink-dark, #d92868);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-weekdays {
  margin-bottom: 6px;
}
.cal-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  opacity: 0.55;
  padding: 4px 0;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(16, 27, 53, 0.1);
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font: inherit;
  color: var(--navy, #101b35);
  padding: 2px;
}
.cal-cell--empty {
  border: none;
  background: transparent;
  cursor: default;
}
.cal-day {
  font-size: 0.9rem;
  font-weight: 600;
}
.cal-price {
  font-size: 0.72rem;
  opacity: 0.6;
}
.cal-price.is-custom {
  color: var(--pink-dark, #d92868);
  opacity: 1;
  font-weight: 700;
}
.cal-cell--past {
  opacity: 0.35;
  cursor: default;
  background: rgba(16, 27, 53, 0.03);
}
.cal-cell--blocked {
  background: rgba(16, 27, 53, 0.09);
  color: rgba(16, 27, 53, 0.45);
  text-decoration: line-through;
}
/* Date réservée (ferme) : verrouillée, non éditable. */
.cal-cell--booked {
  background: rgba(42, 157, 143, 0.16);
  color: #1f7a6f;
  cursor: default;
}
.cal-booked-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #1f7a6f;
}
/* Demande de réservation en attente. */
.cal-cell--pending {
  background: rgba(230, 160, 30, 0.16);
}
.cal-cell--sel {
  border-color: var(--pink, #f13e7c);
  box-shadow: inset 0 0 0 2px var(--pink, #f13e7c);
}
.cal-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 0.82rem;
  opacity: 0.75;
}
.cal-legend .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}
.dot-blocked {
  background: rgba(16, 27, 53, 0.25);
}
.dot-custom {
  background: var(--pink, #f13e7c);
}
.dot-booked {
  background: #2a9d8f;
}
.dot-pending {
  background: #e0a01e;
}
.dot-ical {
  background: #5b6ee0;
}
/* Nuit importée d'un flux iCal externe : verrouillée, teinte indigo. */
.cal-cell--ical {
  background: rgba(91, 110, 224, 0.16);
  color: #3a49b0;
  cursor: default;
}
.cal-cell--ical .cal-booked-label {
  color: #3a49b0;
}
/* Bandeau « piloté par Beds24 » (calendrier en lecture seule). */
.cal-managed {
  margin: 0 0 12px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(91, 110, 224, 0.12);
  color: #3a49b0;
  font-weight: 700;
  font-size: 0.85rem;
}
/* Jours Beds24 « pas d'arrivée » / « pas de départ » (coins colorés). */
.cal-cell--noci,
.cal-cell--noco {
  position: relative;
}
.cal-cell--noci::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  border-top: 8px solid #c9a227;
  border-right: 8px solid transparent;
}
.cal-cell--noco::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  border-bottom: 8px solid #9c6b3a;
  border-left: 8px solid transparent;
}

/* ---------- Panneau de synchronisation iCal ---------- */
.ical {
  margin-top: 28px;
  border-top: 1px solid rgba(16, 27, 53, 0.1);
  padding-top: 8px;
}
.ical-block {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(16, 27, 53, 0.12);
  border-radius: 14px;
  background: rgba(16, 27, 53, 0.02);
}
.ical-block h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.ical-help {
  margin: 0 0 12px;
  font-size: 0.85rem;
  opacity: 0.7;
}
.ical-add,
.ical-export {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ical-input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(16, 27, 53, 0.2);
  border-radius: 10px;
  font-size: 0.9rem;
  background: #fff;
}
.ical-input--label {
  flex: 0 1 160px;
}
.ical-err {
  margin: 8px 0 0;
  color: #c31f5c;
  font-size: 0.85rem;
  font-weight: 600;
}
.ical-list {
  list-style: none;
  margin: 14px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ical-feed {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(16, 27, 53, 0.12);
  border-radius: 10px;
  background: #fff;
}
.ical-feed-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ical-feed-url {
  font-size: 0.78rem;
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}
.ical-status {
  font-size: 0.78rem;
  font-weight: 600;
}
.ical-status.is-ok {
  color: #1f7a6f;
}
.ical-status.is-error {
  color: #c31f5c;
}
/* Aide dépliable « Comment obtenir mon code Beds24 ? » */
.b24-help {
  margin: 4px 0 12px;
  border: 1px solid rgba(91, 110, 224, 0.25);
  border-radius: 10px;
  background: rgba(91, 110, 224, 0.05);
  padding: 8px 12px;
}
.b24-help > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  color: #3a49b0;
  list-style: none;
}
.b24-help > summary::before {
  content: 'ℹ️ ';
}
.b24-help[open] > summary {
  margin-bottom: 8px;
}
.b24-help ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.cal-tools {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: #fbfbfe;
  border: 1px solid rgba(16, 27, 53, 0.1);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.cal-tools.is-active {
  opacity: 1;
  border-color: rgba(241, 62, 124, 0.35);
}
.cal-count {
  font-weight: 700;
  font-size: 0.9rem;
}
.cal-tools-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}
.cal-price-input {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 10px;
  width: 120px;
}
.cal-hint {
  margin: 12px 0 0;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ---------- Prix & publication (page de gestion) ---------- */
.publish {
  margin-top: 32px;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 18px;
  padding: 24px clamp(18px, 3vw, 28px);
  box-shadow: 0 12px 30px rgba(16, 27, 53, 0.07);
}
.publish-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.publish-head h2 {
  margin: 0;
  font-size: 1.2rem;
}
.publish-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 27, 53, 0.08);
  color: rgba(16, 27, 53, 0.6);
}
.publish-badge.is-live {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.publish-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.publish-price {
  max-width: 220px;
}
.publish-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.publish-hint {
  font-size: 0.88rem;
  color: var(--pink-dark, #d92868);
}
.publish-note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ================= Vitrine publique des annonces ================= */

/* Barre de recherche (destination + dates + voyageurs) */
.search-bar {
  box-sizing: border-box;
  width: min(920px, 100%);
  margin: 24px auto 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.12);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(16, 27, 53, 0.1);
  padding: 8px 8px 8px 20px;
}
.search-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 4px 12px;
  border-right: 1px solid rgba(16, 27, 53, 0.1);
}
.search-field:last-of-type {
  border-right: none;
}
.search-field span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy, #101b35);
}
.search-field input,
.search-field select {
  font: inherit;
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--navy, #101b35);
  padding: 2px 0;
}
.search-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--pink, #f13e7c);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-btn:hover {
  background: var(--pink-dark, #d92868);
}
@media (max-width: 760px) {
  .search-bar {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin: 20px 14px 0;
    border-radius: 20px;
    padding: 8px;
    gap: 2px;
  }
  .search-field {
    border-right: none;
    border-bottom: 1px solid rgba(16, 27, 53, 0.1);
    padding: 8px 12px;
  }
  .search-field:last-of-type {
    border-bottom: none;
  }
  .search-btn {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    margin-top: 6px;
  }
}

/* Grille de cartes */
.browse-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px 18px;
}
.browse-card-wrap {
  position: relative;
}
.browse-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Cœur « favori » superposé sur l'annonce */
.fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy, #101b35);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 27, 53, 0.28);
  transition: transform 0.1s ease, color 0.12s ease, background 0.12s ease;
}
.fav-btn:hover {
  transform: scale(1.08);
  background: #fff;
}
.fav-btn.is-on {
  color: var(--pink, #f13e7c);
}
.fiche-gallery-wrap {
  position: relative;
}
.fiche-gallery-wrap > .fav-btn {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
}
.browse-photo {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: rgba(16, 27, 53, 0.06);
}
.browse-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.browse-card:hover .browse-photo img {
  transform: scale(1.04);
}
.browse-photo-empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f7f8fc, #e7eaf3);
}
.browse-loc {
  margin: 0;
  font-weight: 700;
  font-size: 0.98rem;
}
.browse-type {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.6;
}
.browse-price {
  margin: 2px 0 0;
  font-size: 0.95rem;
}
.browse-rating {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--pink-dark, #d92868);
  font-weight: 600;
}

/* ================= Fiche détail d'une annonce ================= */
.fiche {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 48px) 72px;
}
.fiche-preview {
  background: rgba(241, 62, 124, 0.1);
  border: 1px dashed rgba(241, 62, 124, 0.5);
  color: var(--pink-dark, #d92868);
  padding: 10px 14px;
  border-radius: 12px;
  margin: 0 0 18px;
  font-weight: 600;
}
.fiche-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 230px;
  gap: 8px;
  border-radius: 18px;
  overflow: hidden;
}
.fiche-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.gallery-all-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: #fff;
  color: var(--navy, #101b35);
  border: 1px solid rgba(16, 27, 53, 0.15);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 27, 53, 0.2);
}
.gallery-all-btn:hover {
  background: var(--pink, #f13e7c);
  color: #fff;
  border-color: var(--pink, #f13e7c);
}

/* Plein écran de toutes les photos */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fff;
  overflow-y: auto;
}
.gallery-modal-bar {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(16, 27, 53, 0.08);
  padding: 12px clamp(16px, 4vw, 40px);
}
.gallery-close {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy, #101b35);
  cursor: pointer;
  padding: 6px 4px;
}
.gallery-close:hover {
  color: var(--pink-dark, #d92868);
}
.gallery-modal-grid {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 40px) 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gallery-modal-grid img {
  width: 100%;
  border-radius: 14px;
  display: block;
}
.fiche-gallery img:first-child {
  grid-row: span 2;
  grid-column: 1;
  height: 468px;
}
.fiche-gallery--single {
  grid-template-columns: 1fr;
}
.fiche-gallery--single img:first-child {
  grid-row: auto;
  height: 518px;
}
.fiche-gallery-empty {
  height: 374px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7f8fc, #e7eaf3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(16, 27, 53, 0.4);
  font-weight: 600;
}
.fiche-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.fiche-head h1 {
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}
.fiche-meta {
  margin: 6px 0 0;
  opacity: 0.7;
}
.fiche-book {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  /* Prend toute la largeur (comme la galerie photos) et passe sous le titre,
     au lieu d'un cadre étroit calé sur un côté. */
  flex: 1 1 100%;
  width: 100%;
}
.fiche-price {
  margin: 0;
  font-size: 1.1rem;
}
.fiche-price strong {
  font-size: 1.35rem;
}
.fiche-section {
  margin-top: 28px;
  border-top: 1px solid rgba(16, 27, 53, 0.08);
  padding-top: 20px;
}
.fiche-section h2 {
  font-size: 1.2rem;
  margin: 0 0 12px;
}
.fiche-desc {
  margin: 0;
  line-height: 1.6;
  white-space: pre-line;
  opacity: 0.85;
}
/* Description « Lire la suite » — repli uniquement sur mobile ; le bouton
   n'est rendu (par ReadMore.tsx) que si le texte déborde réellement. */
.readmore-btn {
  margin-top: 8px;
  padding: 4px 0;
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--pink-dark, #d92868);
  cursor: pointer;
}
@media (max-width: 620px) {
  .readmore:not(.is-open) .readmore-text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.fiche-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fiche-tags li {
  background: rgba(16, 27, 53, 0.05);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.92rem;
}
.fiche-rules p {
  margin: 0 0 8px;
}
/* Le règlement et les conditions d'annulation cohabitent dans la même
   section : on aère et on sépare le second titre par un filet. */
.fiche-rules h2:not(:first-child) {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(16, 27, 53, 0.08);
}
.fiche-rules-list {
  margin-bottom: 14px;
}
@media (max-width: 620px) {
  .fiche-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .fiche-gallery img:first-child {
    grid-column: span 2;
  }
}

/* Carte de réservation (sur la fiche) */
.bookbox {
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.12);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(16, 27, 53, 0.1);
  width: 100%;
  min-width: 0;
}
.bookbox-price {
  text-align: right;
}
.bookbox-price {
  margin: 0 0 14px;
  font-size: 1.05rem;
}
.bookbox-price strong {
  font-size: 1.35rem;
}
.bookbox-per {
  opacity: 0.65;
}
.bookbox-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bookbox label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy, #101b35);
}
.bookbox input,
.bookbox select,
.bookbox textarea {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 10px;
  background: #fbfbfe;
  color: var(--navy, #101b35);
}
.bookbox textarea {
  resize: vertical;
}
.bookbox-guests,
.bookbox-message {
  margin-top: 8px;
}
.bookbox-btn {
  width: 100%;
  margin-top: 14px;
}
.bookbox-msg {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--pink-dark, #d92868);
}

/* Liste « Mes réservations » */
.resa-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.resa-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 10px 26px rgba(16, 27, 53, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.resa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(16, 27, 53, 0.12);
}
.resa-photo {
  flex: 0 0 140px;
  width: 140px;
  height: 108px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef;
  align-self: stretch;
}
.resa-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.resa-photo .browse-photo-empty {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.resa-main {
  flex: 1;
  min-width: 0;
}
/* Carte entièrement cliquable (lien étiré), boutons au-dessus. */
.resa-card--link {
  position: relative;
  cursor: pointer;
}
.resa-cardlink {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.resa-card--link a:not(.resa-cardlink),
.resa-card--link button,
.resa-card--link textarea,
.resa-card--link input,
.resa-card--link select {
  position: relative;
  z-index: 2;
}
/* Filtres « Mes locations » (statut + période) */
.loc-filters { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 4px; }
.loc-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-chip {
  border: 1px solid rgba(16, 27, 53, 0.18);
  background: #fff;
  color: var(--navy, #101b35);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.loc-chip:hover { border-color: var(--navy, #101b35); }
.loc-chip.is-on { background: var(--navy, #101b35); color: #fff; border-color: var(--navy, #101b35); }
.loc-chip--period.is-on { background: var(--pink, #f13e7c); border-color: var(--pink, #f13e7c); }
.resa-section-title {
  margin: 34px 0 4px;
  font-size: 1.25rem;
  color: var(--navy, #101b35);
}
@media (max-width: 560px) {
  .resa-card {
    flex-wrap: wrap;
  }
  .resa-photo {
    flex-basis: 100%;
    width: 100%;
    height: 160px;
  }
}
.resa-main h3 {
  margin: 0 0 2px;
  font-size: 1.1rem;
}
.resa-dates {
  margin: 6px 0 0;
  font-size: 0.9rem;
  opacity: 0.7;
}
.resa-side {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.resa-status {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 27, 53, 0.08);
  color: rgba(16, 27, 53, 0.6);
}
.resa-status.status-accepted,
.resa-status.status-confirmed,
.resa-status.status-paid {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.resa-status.status-declined,
.resa-status.status-cancelled {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.resa-status.status-requested {
  background: rgba(234, 179, 8, 0.16);
  color: #a16207;
}
.resa-status.status-completed {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}
.resa-total {
  font-size: 1.15rem;
}
.resa-card--static {
  cursor: default;
}
.resa-card--static:hover {
  transform: none;
  box-shadow: 0 10px 26px rgba(16, 27, 53, 0.06);
}
.resa-title-link {
  text-decoration: none;
  color: inherit;
}
.resa-title-link:hover h3 {
  color: var(--pink-dark, #d92868);
}
.resa-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.resa-action-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
}
.resa-action-msg {
  font-size: 0.85rem;
  color: var(--pink-dark, #d92868);
}
/* Confirmation d'annulation (2 étapes, pas un simple clic) */
.resa-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.resa-confirm-q {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy, #101b35);
}
.resa-detail-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  text-decoration: none;
}
.resa-guest-rating {
  color: var(--pink-dark, #d92868);
  font-weight: 700;
}
.mod-reject {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.mod-reject input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 8px;
}

/* Formulaire de demande prestataire */
.reqform {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
}
.reqform label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy, #101b35);
}
.reqform input,
.reqform textarea {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 10px;
  background: #fbfbfe;
  color: var(--navy, #101b35);
  resize: vertical;
}
.reqpanel {
  margin-top: 6px;
}
.resa-message {
  margin: 8px 0 0;
  padding: 10px 14px;
  background: rgba(16, 27, 53, 0.04);
  border-radius: 12px;
  font-style: italic;
  line-height: 1.45;
  color: rgba(16, 27, 53, 0.85);
}

/* ---------- Avis ---------- */
.fiche-rating {
  margin: 8px 0 0;
  color: var(--pink-dark, #d92868);
  font-weight: 600;
}
.fiche-rating strong {
  font-size: 1.1rem;
}
.reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.review {
  background: rgba(16, 27, 53, 0.03);
  border-radius: 14px;
  padding: 16px;
}
.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.review-rating {
  font-weight: 800;
  color: var(--navy, #101b35);
  background: rgba(241, 62, 124, 0.12);
  color: var(--pink-dark, #d92868);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
}
.review-date {
  font-size: 0.82rem;
  opacity: 0.55;
  text-transform: capitalize;
}
.review-comment {
  margin: 0;
  line-height: 1.5;
  opacity: 0.85;
}

/* Formulaire d'avis (dans Mes réservations) */
.reviewform {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.reviewform-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.reviewform-rating select {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 8px;
}
.reviewform textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 10px;
  background: #fbfbfe;
  resize: vertical;
}

/* ---------- Messagerie ---------- */
.fiche-contact {
  width: 100%;
  margin-top: 10px;
}
.thread-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thread-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 22px rgba(16, 27, 53, 0.05);
  transition: transform 0.12s ease;
}
.thread-item:hover {
  transform: translateY(-2px);
}
.thread-item h3 {
  margin: 0;
  font-size: 1.05rem;
}
.thread-role {
  margin: 3px 0 0;
  font-size: 0.85rem;
  color: var(--pink-dark, #d92868);
  font-weight: 600;
}
.thread-arrow {
  font-size: 1.6rem;
  opacity: 0.4;
}
.thread-view {
  margin-top: 20px;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(16, 27, 53, 0.07);
}
.msg-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg {
  display: flex;
}
.msg--mine {
  justify-content: flex-end;
}
.msg-body {
  display: inline-block;
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: pre-line;
  line-height: 1.4;
}
.msg--other .msg-body {
  background: rgba(16, 27, 53, 0.06);
  color: var(--navy, #101b35);
  border-bottom-left-radius: 4px;
}
.msg--mine .msg-body {
  background: var(--pink, #f13e7c);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 12px;
  background: #fbfbfe;
  resize: vertical;
}

/* ---------- Formulaire d'ajout de logement ---------- */
.lf {
  margin-top: 36px;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 18px;
  padding: 24px clamp(18px, 3vw, 28px);
  box-shadow: 0 12px 30px rgba(16, 27, 53, 0.07);
}
.lf h2 {
  margin: 0 0 16px;
  font-size: 1.2rem;
}
.lf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}
.lf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lf-field.lf-col2 {
  grid-column: 1 / -1;
}
.lf-field span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy, #101b35);
}
.lf-field input,
.lf-field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 10px;
  background: #fbfbfe;
  color: var(--navy, #101b35);
}
.lf-field input:focus,
.lf-field textarea:focus {
  outline: none;
  border-color: var(--pink, #f13e7c);
  box-shadow: 0 0 0 3px rgba(241, 62, 124, 0.15);
}
.lf .espace-btn--primary {
  margin-top: 18px;
}
.lf-error {
  margin: 10px 0 0;
  color: var(--pink-dark, #d92868);
  font-weight: 700;
}
@media (max-width: 560px) {
  .lf-grid {
    grid-template-columns: 1fr;
  }
  .lf-field.lf-col2 {
    grid-column: auto;
  }
}

/* ---------- En-tête « Mes logements » avec bouton à droite ---------- */
.espace-intro--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Assistant de création (wizard) ---------- */
.wiz {
  margin-top: 24px;
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.08);
  border-radius: 18px;
  padding: 24px clamp(18px, 3vw, 28px);
  box-shadow: 0 12px 30px rgba(16, 27, 53, 0.07);
}
.wiz-progress-label {
  margin: 0 0 8px;
  font-size: 0.92rem;
  opacity: 0.8;
}
.wiz-progress {
  height: 8px;
  background: rgba(16, 27, 53, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.wiz-progress span {
  display: block;
  height: 100%;
  background: var(--pink, #f13e7c);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.wiz-body {
  margin: 22px 0;
  min-height: 180px;
}
.wiz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}
.wiz-grid .lf-field.lf-col2 {
  grid-column: 1 / -1;
}
.wiz-grid select,
.wiz-grid input,
.wiz-grid textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 10px;
  background: #fbfbfe;
  color: var(--navy, #101b35);
}
.wiz-grid select:focus,
.wiz-grid input:focus,
.wiz-grid textarea:focus {
  outline: none;
  border-color: var(--pink, #f13e7c);
  box-shadow: 0 0 0 3px rgba(241, 62, 124, 0.15);
}

/* Couchage */
.wiz-beds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.wiz-bed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fbfbfe;
  border: 1px solid rgba(16, 27, 53, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
}
.wiz-bed-row input {
  width: 68px;
  text-align: center;
}

/* Équipements */
.wiz-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.wiz-amenity {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fbfbfe;
  border: 1px solid rgba(16, 27, 53, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.wiz-amenity input {
  accent-color: var(--pink, #f13e7c);
  width: 18px;
  height: 18px;
}

/* Récapitulatif */
.wiz-recap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wiz-recap li {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(16, 27, 53, 0.08);
}
.wiz-note {
  font-size: 0.9rem;
  color: var(--pink-dark, #d92868);
  background: rgba(241, 62, 124, 0.06);
  padding: 10px 12px;
  border-radius: 10px;
  margin: 4px 0 0;
}

/* Navigation */
.wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wiz-nav-right {
  display: flex;
  gap: 10px;
}
@media (max-width: 560px) {
  .wiz-grid {
    grid-template-columns: 1fr;
  }
  .wiz-grid .lf-field.lf-col2 {
    grid-column: auto;
  }
}

/* ---------- Section « devenir hôte / prestataire » ---------- */
.espace-become {
  margin-top: 32px;
  background: linear-gradient(135deg, var(--navy, #101b35), #1b2c52);
  color: #fff;
  border-radius: 20px;
  padding: 28px clamp(20px, 4vw, 40px);
}
.espace-become h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
}
.espace-become p {
  margin: 0 0 16px;
  opacity: 0.8;
}
.espace-become-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.espace-become .espace-btn--soon {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}
.espace-become .espace-btn--light {
  background: #fff;
  color: var(--pink-dark, #d92868);
}
.espace-become .espace-btn--light:hover:not(:disabled) {
  background: var(--pink, #f13e7c);
  color: #fff;
}
.espace-become-decline {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  padding: 0;
}
.espace-become-decline:hover {
  color: #fff;
}
/* Invite discrète après masquage du bandeau */
.espace-become-mini {
  margin: 8px 2px;
  color: #5f6b85;
  font-size: 0.9rem;
}
.espace-become-mini-link {
  background: none;
  border: none;
  color: var(--pink, #f13e7c);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
}
.espace-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Écran non connecté ---------- */
.espace-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  gap: 14px;
}
.espace-empty h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0;
}
.espace-empty p {
  margin: 0;
  opacity: 0.7;
  max-width: 420px;
}
.espace-empty .espace-btn {
  margin-top: 8px;
}

/* ================= Calculateur de taxe de séjour ================= */
.citytax-cell {
  position: relative;
}
.citytax-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.citytax-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  border-radius: 6px;
}
.citytax-toggle:hover {
  background: rgba(241, 62, 124, 0.12);
}
.citytax-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  margin-top: 6px;
  width: min(340px, 88vw);
  background: #fff;
  border: 1px solid rgba(16, 27, 53, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16, 27, 53, 0.18);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.citytax-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--navy, #101b35);
}
.citytax-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--navy, #101b35);
  opacity: 0.6;
}
.citytax-close:hover {
  opacity: 1;
}
.citytax-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.citytax-field select,
.citytax-field input {
  padding: 7px 9px;
  border: 1px solid rgba(16, 27, 53, 0.18);
  border-radius: 8px;
  font: inherit;
}
.citytax-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.citytax-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.citytax-result {
  border-top: 1px solid rgba(16, 27, 53, 0.1);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.citytax-amount {
  margin: 0;
  font-size: 0.95rem;
}
.citytax-amount strong {
  font-size: 1.25rem;
  color: var(--pink-dark, #d92868);
}
.citytax-detail {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.75;
}
.citytax-apply {
  align-self: flex-start;
  margin-top: 2px;
}
.citytax-disclaimer {
  margin: 0;
  font-size: 0.72rem;
  opacity: 0.6;
  line-height: 1.35;
}

/* ================= Zone de suppression (danger) ================= */
.danger-zone {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid rgba(217, 40, 104, 0.3);
  border-radius: 16px;
  background: rgba(217, 40, 104, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.danger-zone h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--pink-dark, #d92868);
}
.danger-zone p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
  max-width: 46ch;
}
.espace-btn--danger {
  background: transparent;
  color: var(--pink-dark, #d92868);
  box-shadow: inset 0 0 0 2px var(--pink-dark, #d92868);
}
.espace-btn--danger:hover {
  background: var(--pink-dark, #d92868);
  color: #fff;
}

/* =====================================================================
   Mobile : le menu partagé « façon appli » (MobileNav / .appbar, défini dans
   style.css) remplace l'en-tête sobre des pages espace. On masque cet en-tête
   et on réserve la hauteur du menu fixe en haut (le bas est géré globalement
   par body{padding-bottom} dans style.css).
   ===================================================================== */
/* Intro aérée : de l'air sous le sous-titre, puis une rangée de boutons. */
.espace-intro p {
  margin-bottom: 22px;
}
.espace-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
/* Note du voyageur à droite de l'encadré « Voyageurs » (fiche réservation) */
.rd-guests { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rd-guests-main { min-width: 0; }
.rd-guest-note { flex: none; text-align: right; }
.rd-guest-note-link { text-decoration: none; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rd-guest-note-val { font-weight: 800; font-size: 1.15rem; color: var(--pink-dark, #d92868); }
.rd-guest-note-sub { font-size: 0.76rem; color: #5f6b85; }
.rd-guest-note-new { display: inline-block; background: rgba(59,130,246,0.14); color: #1d4ed8; border-radius: 999px; padding: 4px 10px; font-size: 0.76rem; font-weight: 700; }

/* Barre d'actions du tableau de bord : Installer · Notifications · Déconnexion.
   Discrète en bas du contenu sur desktop ; FIXE en bas sur mobile/tablette. */
.espace-bottombar {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(16, 27, 53, 0.1);
  box-shadow: 0 14px 34px rgba(16, 27, 53, 0.08);
}
.espace-bottombar__status {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}
/* « Se déconnecter » en haut du tableau de bord, au-dessus des raccourcis —
   MOBILE UNIQUEMENT (desktop garde le logout du header). */
.espace-intro-logout {
  display: none;
  margin: 0 0 16px;
}
.espace-logout-btn {
  background: #9aa0ad;
  color: #ffffff;
}
.espace-logout-btn:hover {
  background: #868c99;
}

@media (max-width: 1180px) {
  .espace-header {
    display: none;
  }
  .espace-shell {
    padding-top: calc(var(--mobile-header-h, 140px) + 10px);
  }
  /* La barre reste DANS LE FLUX (à la suite du contenu), jamais en overlay.
     Le « Se déconnecter » du haut apparaît (le header qui le porte est masqué). */
  .espace-intro-logout {
    display: block;
  }
}

/* ------------------------------------------------------------------ */
/*  Vente & location (petites annonces immobilières)                   */
/* ------------------------------------------------------------------ */
.estate-tabs { display: flex; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.estate-tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(16, 27, 53, 0.14);
  background: #fff; color: var(--navy, #101b35); text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
}
.estate-tab.is-active { background: var(--pink, #f13e7c); border-color: var(--pink, #f13e7c); color: #fff; }
.browse-photo { position: relative; }
.estate-badge {
  position: absolute; top: 10px; left: 10px; background: rgba(16, 27, 53, 0.82);
  color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
}
.estate-status {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; margin: 0 0 6px;
}
.estate-status--draft { background: rgba(16, 27, 53, 0.08); color: #3a4256; }
.estate-status--pending { background: #fff3d6; color: #8a6100; }
.estate-status--published { background: #daf5e6; color: #0a6b3b; }
.estate-status--rejected { background: #ffe0e6; color: #b0173c; }
.estate-reject { color: #b0173c; font-size: 0.85rem; margin: 6px 0 0; }
.photo-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.photo-thumb { position: relative; width: 110px; height: 84px; border-radius: 10px; overflow: hidden; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lf-check { flex-direction: row; align-items: center; gap: 8px; }
.lf-check input { width: auto; }
.lf-saved { color: #0a6b3b; font-weight: 700; margin-left: 8px; }
.espace-btn--soft {
  background: rgba(16, 27, 53, 0.06); color: var(--navy, #101b35);
  cursor: pointer; display: inline-block;
}

/* ===================================================================== */
/* Calendrier multi-logements (lecture seule) — style PMS, palette Staylaro */
/* ===================================================================== */
.mcal-main { max-width: none; padding: 12px 14px 24px; }
.mcal { --pink: #f13e7c; --pink-dark: #d92868; --navy: #101b35;
  --confirmed: #2a9d8f; --pending: #e0a01e; --cm: #6b73a8; }

.mcal-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-bottom: 14px;
}
.mcal-nav { display: flex; align-items: center; gap: 8px; }
.mcal-navbtn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid #dfe3ee;
  background: #fff; color: var(--navy); font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.mcal-navbtn:hover { border-color: var(--pink); color: var(--pink-dark); }
.mcal-today {
  height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid #dfe3ee;
  background: #fff; color: var(--navy); font-weight: 600; cursor: pointer;
}
.mcal-today:hover { border-color: var(--pink); color: var(--pink-dark); }
.mcal-range { color: #6b7280; font-size: 14px; margin-left: 6px; text-transform: capitalize; }

.mcal-zoom { display: inline-flex; border: 1px solid #dfe3ee; border-radius: 9px; overflow: hidden; }
.mcal-zoombtn { border: 0; background: #fff; padding: 8px 14px; cursor: pointer; color: var(--navy); font-weight: 600; }
.mcal-zoombtn + .mcal-zoombtn { border-left: 1px solid #dfe3ee; }
.mcal-zoombtn.is-active { background: var(--pink); color: #fff; }

.mcal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; color: #4b5563; font-size: 13px; }
.mcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mcal-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mcal-dot--confirmed { background: var(--confirmed); }
.mcal-dot--pending { background: var(--pending); }
.mcal-dot--cm { background: var(--cm); }

.mcal-info { padding: 22px; color: #6b7280; }
.mcal-info--err { color: var(--pink-dark); }
.mcal-retry { background: none; border: 0; color: var(--pink-dark); text-decoration: underline; cursor: pointer; font: inherit; }

/* Grille */
.mcal-scroll { overflow: auto; max-height: calc(100vh - 150px); border: 1px solid #e6e9f2; border-radius: 14px; background: #fff; }
/* En-têtes figés en haut pendant le défilement vertical (ascenseur horizontal
   toujours visible en bas de l'écran) */
.mcal-row--press { position: sticky; top: 0; z-index: 6; height: 24px; background: #fbfcff; }
.mcal-row--occ { position: sticky; top: 24px; z-index: 6; height: 52px; background: #fbfcff; }
.mcal-row--head { position: sticky; top: 76px; z-index: 6; background: #f7f8fc; }
.mcal-grid { position: relative; }
.mcal-row { display: flex; align-items: stretch; border-top: 1px solid #eef1f8; }
.mcal-row:first-child { border-top: 0; }

.mcal-label {
  position: sticky; left: 0; z-index: 3; flex: 0 0 auto;
  background: #fff; border-right: 1px solid #e6e9f2;
  padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.mcal-ltitle { font-weight: 700; color: var(--navy); font-size: 14px; line-height: 1.25; }
.mcal-lmeta { font-size: 12px; color: #6b7280; display: flex; align-items: center; gap: 8px; }
/* Label cliquable → calendrier individuel */
a.mcal-label--link { text-decoration: none; cursor: pointer; position: sticky; left: 0; z-index: 3; transition: background .12s; padding-right: 28px; }
a.mcal-label--link:hover { background: #fdf1f6; }
a.mcal-label--link:hover .mcal-ltitle { color: var(--pink-dark); }
.mcal-lgo {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #cbd0dd; font-size: 22px; line-height: 1; transition: color .12s, transform .12s;
}
a.mcal-label--link:hover .mcal-lgo { color: var(--pink); transform: translateY(-50%) translateX(2px); }
.mcal-badge {
  background: rgba(107, 115, 168, 0.14); color: var(--cm); font-weight: 700;
  border-radius: 999px; padding: 1px 8px; font-size: 11px;
}
.mcal-label--head, .mcal-label--occ {
  z-index: 4; font-weight: 700; color: var(--navy);
  justify-content: center; text-transform: uppercase; letter-spacing: .03em; font-size: 12px;
}
.mcal-row--head .mcal-label--head { background: #f7f8fc; }
.mcal-row--occ { background: #fbfcff; }

.mcal-track { position: relative; flex: 0 0 auto; }
.mcal-days { display: grid; }
.mcal-days--head { align-items: stretch; }

.mcal-dhead {
  border-left: 1px solid #eef1f8; padding: 6px 0; text-align: center;
  display: flex; flex-direction: column; gap: 1px; background: #f7f8fc;
}
.mcal-dhead.is-weekend { background: #eef1f8; }
.mcal-dhead.is-today { background: rgba(241, 62, 124, 0.10); }
.mcal-dow { font-size: 11px; color: #6b7280; text-transform: uppercase; }
.mcal-dnum { font-size: 16px; font-weight: 700; color: var(--navy); }
.mcal-dmon { font-size: 10px; color: #9aa1b2; text-transform: uppercase; }

.mcal-occ {
  border-left: 1px solid #eef1f8; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 2px; padding: 6px 0 4px;
}
.mcal-occ-bar { width: 22px; background: linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%); border-radius: 3px 3px 0 0; }
.mcal-occ-num { font-size: 10px; color: #6b7280; font-variant-numeric: tabular-nums; }

.mcal-cell {
  border-left: 1px solid #eef1f8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.mcal-cell.is-weekend { background: #fafbff; }
.mcal-cell.is-today { background: rgba(241, 62, 124, 0.05); }
.mcal-cell.is-unavail { background: repeating-linear-gradient(45deg, #f3f4f8, #f3f4f8 6px, #eceef5 6px, #eceef5 12px); }
.mcal-price { font-size: 13px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.mcal-min { font-size: 10px; color: #9aa1b2; }

/* Barres */
.mcal-bars { position: absolute; left: 0; right: 0; pointer-events: none; }
.mcal-bar {
  position: absolute; pointer-events: auto; border: 0; cursor: pointer;
  border-radius: 6px; padding: 0 10px; display: flex; align-items: center;
  color: #fff; font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16, 27, 53, 0.18);
}
.mcal-bar-name { overflow: hidden; text-overflow: ellipsis; }
.mcal-bar--confirmed { background: var(--confirmed); }
.mcal-bar--pending { background: var(--pending); }
.mcal-bar--cm { background: var(--cm); }
.mcal-bar.has-arr { border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
.mcal-bar.has-dep { border-top-right-radius: 13px; border-bottom-right-radius: 13px; }
.mcal-bar:not(.has-arr) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mcal-bar:not(.has-dep) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Panneau détail */
.mcal-sheet-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(16, 27, 53, 0.32);
  display: flex; justify-content: flex-end;
}
.mcal-sheet {
  position: relative; width: min(400px, 92vw); background: #fff; height: 100%;
  padding: 26px 24px; box-shadow: -8px 0 30px rgba(16, 27, 53, 0.2); overflow-y: auto;
}
.mcal-sheet-close {
  position: absolute; top: 14px; right: 16px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: #9aa1b2; cursor: pointer;
}
.mcal-status {
  display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 12px;
  font-weight: 700; color: #fff; text-transform: capitalize;
}
.mcal-status--confirmed { background: var(--confirmed); }
.mcal-status--pending { background: var(--pending); }
.mcal-status--cm { background: var(--cm); }
.mcal-sheet-title { margin: 12px 0 2px; color: var(--navy); font-size: 22px; }
.mcal-sheet-listing { margin: 0 0 18px; color: #6b7280; }
.mcal-sheet-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0 0 20px; }
.mcal-sheet-dl dt { font-size: 12px; color: #9aa1b2; text-transform: uppercase; letter-spacing: .03em; }
.mcal-sheet-dl dd { margin: 2px 0 0; color: var(--navy); font-weight: 600; }
.mcal-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.mcal-sheet-note { color: #6b7280; font-size: 14px; background: #f7f8fc; border-radius: 10px; padding: 12px 14px; }

@media (max-width: 640px) {
  .mcal-legend { margin-left: 0; width: 100%; }
  .mcal-sheet-overlay { align-items: flex-end; }
  .mcal-sheet { width: 100%; height: auto; max-height: 88vh; border-radius: 18px 18px 0 0; }
}

/* ---- Calendrier multi-logements : édition + OTA + teintes par appart ---- */
.mcal-help { color: #6b7280; font-size: 13px; margin: 0 0 10px; }

/* Teinte par appartement (variable --tint = hue) */
.mcal-row--listing { background: hsl(var(--tint, 220) 68% 97%); }
a.mcal-label--link { background: hsl(var(--tint, 220) 55% 93%); box-shadow: inset 4px 0 0 hsl(var(--tint, 220) 60% 58%); }
a.mcal-label--link:hover { background: hsl(var(--tint, 220) 60% 89%); }
/* Cellules translucides pour laisser voir la teinte de ligne */
.mcal-cell.is-weekend { background: rgba(16, 27, 53, 0.04); }
.mcal-cell.is-today { background: rgba(241, 62, 124, 0.08); }
.mcal-cell.is-unavail { background: repeating-linear-gradient(45deg, rgba(16,27,53,0.05), rgba(16,27,53,0.05) 6px, rgba(16,27,53,0.10) 6px, rgba(16,27,53,0.10) 12px); }

/* OTA (iCal) */
.mcal-dot--ota { background: #3f7cc4; }
.mcal-bar--ota { background: #3f7cc4; }
.mcal-status--ota { background: #3f7cc4; }

/* Édition en ligne */
.mcal-cell.is-editable .mcal-price { cursor: pointer; border-radius: 5px; padding: 0 5px; }
.mcal-cell.is-editable .mcal-price:hover { background: rgba(241, 62, 124, 0.14); }
.mcal-min.is-editable { cursor: pointer; border-radius: 5px; padding: 0 4px; }
.mcal-min.is-editable:hover { background: rgba(241, 62, 124, 0.12); color: var(--pink-dark, #d92868); }
.mcal-edit { width: 62px; font: inherit; font-size: 13px; font-weight: 700; text-align: center; border: 1px solid var(--pink, #f13e7c); border-radius: 6px; padding: 1px 2px; color: var(--navy, #101b35); }
.mcal-edit--min { width: 48px; font-size: 11px; font-weight: 600; }

/* Post-it (coin replié) */
.mcal-cell { position: relative; }
.mcal-postit { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 12px solid #f2c14e; border-left: 12px solid transparent; }

/* Fenêtre d'édition groupée */
.mcal-sheet-overlay--center { align-items: center; justify-content: center; }
.mcal-modal { position: relative; width: min(520px, 94vw); max-height: 90vh; overflow: auto; background: #fff; border-radius: 16px; padding: 26px 24px; box-shadow: 0 20px 60px rgba(16, 27, 53, 0.25); }
.mcal-modal-title { margin: 0 0 18px; color: var(--navy, #101b35); font-size: 20px; }
.mcal-field { display: block; margin: 0 0 14px; border: 0; padding: 0; }
.mcal-field > span:first-child, .mcal-field legend { font-weight: 600; font-size: 13px; color: var(--navy, #101b35); display: block; margin-bottom: 6px; padding: 0; }
.mcal-field-row { display: flex; gap: 8px; }
.mcal-modal input, .mcal-modal select { padding: 7px 9px; border: 1px solid #dfe3ee; border-radius: 8px; font: inherit; color: var(--navy, #101b35); background: #fff; }
.mcal-modal input[type="date"], .mcal-modal input[type="number"], .mcal-modal input[type="text"], .mcal-modal select { min-width: 0; }
.mcal-field--toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mcal-field--toggle > span:first-child { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.mcal-field--toggle input[type="text"], .mcal-field--toggle input[type="number"], .mcal-field--toggle select { flex: 0 0 46%; }
.mcal-field--toggle input:disabled, .mcal-field--toggle select:disabled { background: #f5f6fb; color: #9aa1b2; }
.mcal-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.mcal-check { font-size: 13px; display: flex; align-items: center; gap: 7px; color: var(--navy, #101b35); }
.mcal-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) { .mcal-checks { grid-template-columns: 1fr; } }

/* ---- Calendrier : restrictions, post-it indépendant, jours de semaine ---- */
/* Marqueurs no-check-in / no-check-out (coins bas de la case) */
.mcal-noci, .mcal-noco { position: absolute; bottom: 0; width: 0; height: 0; }
.mcal-noci { left: 0; border-bottom: 11px solid #e0554e; border-right: 11px solid transparent; }
.mcal-noco { right: 0; border-bottom: 11px solid #e0554e; border-left: 11px solid transparent; }

/* Post-it : pastille indépendante (coin haut-gauche) */
.mcal-note-dot {
  position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid #cbb26a; background: transparent; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity .12s, transform .12s;
}
.mcal-cell:hover .mcal-note-dot, .mcal-cell.is-today .mcal-note-dot, .mcal-note-dot.has-note { opacity: 1; }
.mcal-note-dot.has-note { background: #f2c14e; border-color: #d9a520; box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.25); }
.mcal-note-dot:hover { transform: scale(1.25); }

/* Mini-éditeur de note */
.mcal-note-pop { position: relative; width: min(360px, 92vw); background: #fff; border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(16, 27, 53, 0.25); }
.mcal-note-title { margin: 0 0 2px; color: var(--navy, #101b35); font-size: 18px; }
.mcal-note-date { margin: 0 0 12px; color: #6b7280; font-size: 13px; text-transform: capitalize; }
.mcal-note-ta { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; border: 1px solid #dfe3ee; border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--navy, #101b35); }
.mcal-note-ta:focus { outline: none; border-color: var(--pink, #f13e7c); box-shadow: 0 0 0 2px rgba(241, 62, 124, 0.18); }
.mcal-note-del { margin-right: auto; background: none; border: 0; color: #b91c1c; font: inherit; font-weight: 600; cursor: pointer; }
.mcal-note-del:hover { text-decoration: underline; }

/* Jours de semaine (chips) */
.mcal-wdays { display: flex; flex-wrap: wrap; gap: 6px; }
.mcal-wday { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 8px; border: 1px solid #dfe3ee; border-radius: 999px; cursor: pointer; text-transform: capitalize; color: #6b7280; }
.mcal-wday.is-on { background: rgba(241, 62, 124, 0.10); border-color: var(--pink, #f13e7c); color: var(--pink-dark, #d92868); font-weight: 600; }
.mcal-wday input { margin: 0; }

/* « Tous les appartements » */
.mcal-check--all { grid-column: 1 / -1; font-weight: 700; border-bottom: 1px solid #eef1f8; padding-bottom: 8px; margin-bottom: 2px; }

/* ---- Calendrier : barres de restriction lisibles (bas de case) ---- */
.mcal-restr { position: absolute; bottom: 0; height: 5px; z-index: 1; pointer-events: none; }
.mcal-restr--block { left: 0; right: 0; background: #64748b; }
.mcal-restr--ci { left: 0; width: 50%; background: #e0554e; }
.mcal-restr--co { right: 0; width: 50%; background: #e0554e; }
.mcal-dot--restr { background: #e0554e; }
.mcal-dot--block { background: #64748b; }
/* Blocage plus lisible sans survol */
.mcal-cell.is-unavail { background: repeating-linear-gradient(45deg, rgba(100,116,139,0.10), rgba(100,116,139,0.10) 6px, rgba(100,116,139,0.20) 6px, rgba(100,116,139,0.20) 12px); }

/* ---- Calendrier : restrictions en étiquettes (option retenue) ---- */
.mcal-rpill { margin-top: 2px; font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: #fff; white-space: nowrap; line-height: 1.5; }
.mcal-rpill--restr { background: #e8863a; }
.mcal-rpill--block { background: #64748b; }
.mcal-dot--restr { background: #e8863a; }
/* Alignement colonne de gauche : en-têtes alignés avec les libellés d'appartement */
.mcal-label--head, .mcal-label--occ { text-align: left; align-items: flex-start; box-shadow: inset 4px 0 0 rgba(16, 27, 53, 0.10); }

/* ---- Calendrier : bande de pression / demande (tout en haut) ---- */
.mcal-row--press { background: #fbfcff; }
.mcal-label--press { z-index: 4; font-weight: 700; color: var(--navy, #101b35); text-transform: uppercase; letter-spacing: .03em; font-size: 12px; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.mcal-press-key { display: inline-flex; gap: 3px; }
.mcal-pk { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mcal-pk--low { background: #2a9d8f; } .mcal-pk--mid { background: #e0a01e; } .mcal-pk--high { background: #e0554e; }
.mcal-press { border-left: 1px solid #eef1f8; display: flex; align-items: center; justify-content: center; min-height: 22px; }
.mcal-press-num { font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.mcal-press--low { background: #7dc9bf; }
.mcal-press--mid { background: #ecb24e; }
.mcal-press--high { background: #e0554e; }

/* Bande de pression : icône info sur le libellé (remplace les 3 carrés) */
.mcal-press-info { margin-left: 6px; color: #9aa1b2; font-size: 12px; cursor: help; }

/* Couleur d'appartement uniforme sur toute la ligne : neutralise les fonds
   week-end / aujourd'hui dans les cellules (le repère jour reste dans l'en-tête). */
.mcal-row--listing .mcal-cell.is-weekend,
.mcal-row--listing .mcal-cell.is-today { background: transparent; }

/* Ligne des dates en couleur (rose Staylaro), opaque — pas transparente */
.mcal-row--head, .mcal-row--head .mcal-label--head { background: var(--pink, #f13e7c); }
.mcal-label--head { color: #fff; box-shadow: inset 4px 0 0 rgba(255,255,255,0.35); }
.mcal-dhead { background: transparent; }
.mcal-dhead .mcal-dow { color: rgba(255,255,255,0.85); }
.mcal-dhead .mcal-dnum { color: #fff; }
.mcal-dhead .mcal-dmon { color: rgba(255,255,255,0.7); }
.mcal-dhead.is-weekend { background: rgba(16,27,53,0.12); }
.mcal-dhead.is-today { background: var(--pink-dark, #d92868); }

/* Calendrier d'un logement : saisie directe + post-it + restriction (comme le multi) */
.cal-cell { position: relative; }
.cal-cell--editable .cal-price { cursor: pointer; border-radius: 5px; padding: 1px 6px; }
.cal-cell--editable .cal-price:hover { background: rgba(241, 62, 124, 0.14); opacity: 1; }
.cal-cell .mcal-edit { width: 54px; }
.cal-rpill { margin-top: 3px; font-size: 9px; padding: 1px 6px; }
.cal-cell .mcal-note-dot { top: 4px; left: 4px; }

/* Glisser-sélection à la souris (période × appartements) */
.mcal-cell { user-select: none; }
.mcal-cell.is-selected { box-shadow: inset 0 0 0 2px var(--pink, #f13e7c); background: rgba(241, 62, 124, 0.12); }
.cal-cell { user-select: none; }
.cal-cell--range { box-shadow: inset 0 0 0 2px var(--pink, #f13e7c); background: rgba(241, 62, 124, 0.12) !important; }

/* Calendrier logement : vue semaines + barres de séjour (nom + arrivée/départ) */
.cal-weeks { display: flex; flex-direction: column; gap: 6px; }
.cal-week { position: relative; }
.cal-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week-bars { position: absolute; inset: 0; pointer-events: none; }
.cal-bar { position: absolute; bottom: 8px; height: 26px; display: flex; align-items: center; padding: 0 10px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; box-shadow: 0 1px 4px rgba(16, 27, 53, 0.22); }
.cal-bar--confirmed { background: #2a9d8f; }
.cal-bar--pending { background: #e0a01e; }
.cal-bar.rl { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.cal-bar.rr { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.cal-bar-name { overflow: hidden; text-overflow: ellipsis; }
/* Contenu de la case en haut, place réservée pour la barre en bas */
.cal-cell { justify-content: flex-start; padding: 6px 4px 40px; }
.cal-blocked-tag { font-size: 0.68rem; color: #64748b; font-weight: 700; }

/* Calendrier multi : UNE seule zone de défilement (supprime le double ascenseur).
   La page ne défile plus ; seul .mcal-scroll défile (H + V). Scopé à la page
   calendrier via :has(.mcal-main). */
.espace-shell:has(.mcal-main) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.espace-shell:has(.mcal-main) .espace-header { flex: 0 0 auto; }
.espace-main.mcal-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mcal-main .mcal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mcal-main .mcal-toolbar, .mcal-main .mcal-help, .mcal-main .mcal-info { flex: 0 0 auto; }
.mcal-main .mcal-scroll { flex: 1; min-height: 0; max-height: none; }

/* ===================================================================== */
/* Messagerie mini-Airbnb — inbox 3 panneaux (hôte + voyageur)           */
/* ===================================================================== */
.espace-shell:has(.inbox-main) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.espace-shell:has(.inbox-main) .espace-header { flex: 0 0 auto; }
.espace-main.inbox-main { flex: 1; min-height: 0; max-width: none; padding: 0; display: flex; }
.inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px 1fr 300px; background: #fff; }
.inbox-list, .inbox-thread, .inbox-resa { min-height: 0; }

/* Colonne 1 : liste */
.inbox-list { display: flex; flex-direction: column; border-right: 1px solid #e6e9f2; background: #fff; }
.inbox-list-head { padding: 16px 16px 10px; border-bottom: 1px solid #eef1f8; }
.inbox-title { margin: 0 0 10px; font-size: 22px; color: var(--navy, #101b35); }
.inbox-search { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #dfe3ee; border-radius: 10px; font: inherit; margin-bottom: 10px; }
.inbox-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inbox-chip { border: 1px solid #dfe3ee; background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--navy, #101b35); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.inbox-chip.is-active { background: var(--navy, #101b35); color: #fff; border-color: var(--navy, #101b35); }
.inbox-chip-n { background: var(--pink, #f13e7c); color: #fff; border-radius: 999px; padding: 0 5px; font-size: 10px; }
.inbox-filters-sep { width: 1px; height: 16px; background: #e6e9f2; margin: 0 2px; }
.inbox-convos { flex: 1; min-height: 0; overflow-y: auto; }
.inbox-empty, .inbox-thread-empty, .inbox-resa-none { padding: 24px; color: #6b7280; }
.inbox-convo { width: 100%; text-align: left; display: flex; gap: 10px; padding: 12px 14px; border: 0; border-bottom: 1px solid #f1f3f9; background: #fff; cursor: pointer; position: relative; font: inherit; }
.inbox-convo:hover { background: #fafbff; }
.inbox-convo.is-sel { background: #fdf1f6; }
.inbox-convo.is-unread .inbox-convo-name { font-weight: 800; }
.inbox-ava { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #f13e7c, #6b73a8); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.inbox-ava--sm { width: 34px; height: 34px; font-size: 12px; }
.inbox-convo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-convo-top { display: flex; justify-content: space-between; gap: 8px; }
.inbox-convo-name { font-weight: 600; color: var(--navy, #101b35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-convo-time { color: #9aa1b2; font-size: 12px; flex: 0 0 auto; }
.inbox-convo-preview { color: #6b7280; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-convo-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.inbox-role { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; text-transform: uppercase; letter-spacing: .02em; }
.inbox-role--host { background: rgba(241, 62, 124, .12); color: #d92868; }
.inbox-role--guest { background: rgba(107, 115, 168, .14); color: #6b73a8; }
.inbox-badge { font-size: 11px; color: #2a9d8f; font-weight: 600; }
.inbox-convo-listing { font-size: 11px; color: #9aa1b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-dot { position: absolute; right: 12px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink, #f13e7c); }

/* Colonne 2 : fil */
.inbox-thread { display: flex; flex-direction: column; background: #f7f8fc; }
.inbox-thread-empty { margin: auto; color: #9aa1b2; }
.inbox-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e6e9f2; background: #fff; }
.inbox-back { display: none; border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--navy, #101b35); }
.inbox-thread-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inbox-thread-who strong { color: var(--navy, #101b35); }
.inbox-thread-sub { font-size: 12px; color: #9aa1b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-tr-btn { border: 1px solid #dfe3ee; background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--navy, #101b35); white-space: nowrap; }
.inbox-tr-btn.is-on { background: rgba(63, 124, 196, .12); border-color: #3f7cc4; color: #3f7cc4; }
.inbox-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.inbox-day { text-align: center; color: #9aa1b2; font-size: 12px; margin: 10px 0 6px; text-transform: capitalize; }
.inbox-bubble-row { display: flex; }
.inbox-bubble-row.mine { justify-content: flex-end; }
.inbox-bubble { max-width: 74%; background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 8px 12px; }
.inbox-bubble.mine { background: var(--navy, #101b35); color: #fff; border-color: var(--navy, #101b35); }
.inbox-bubble-text { white-space: pre-wrap; word-break: break-word; }
.inbox-bubble-time { display: block; font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; }
.inbox-read { text-align: right; font-size: 11px; color: #9aa1b2; padding: 2px 4px; }
.inbox-tr-note { text-align: center; font-size: 11px; color: #3f7cc4; }
.inbox-composer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #e6e9f2; background: #fff; }
.inbox-input { flex: 1; resize: none; border: 1px solid #dfe3ee; border-radius: 12px; padding: 9px 12px; font: inherit; }
.inbox-send { flex: 0 0 auto; width: 42px; border: 0; border-radius: 12px; background: var(--pink, #f13e7c); color: #fff; font-size: 18px; cursor: pointer; }
.inbox-send:disabled { opacity: .4; cursor: default; }

/* Colonne 3 : réservation */
.inbox-resa { overflow-y: auto; border-left: 1px solid #e6e9f2; background: #fff; padding: 16px; }
.inbox-resa-title { margin: 0 0 12px; font-size: 16px; color: var(--navy, #101b35); }
.inbox-resa-card { border: 1px solid #e6e9f2; border-radius: 14px; padding: 16px; }
.inbox-resa-status { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; color: #fff; }
.inbox-resa-status--ok { background: #2a9d8f; }
.inbox-resa-status--pending { background: #e0a01e; }
.inbox-resa-status--other { background: #6b7280; }
.inbox-resa-dates { margin: 12px 0; font-weight: 600; color: var(--navy, #101b35); }
.inbox-resa-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.inbox-resa-dl dt { font-size: 11px; color: #9aa1b2; text-transform: uppercase; }
.inbox-resa-dl dd { margin: 2px 0 0; color: var(--navy, #101b35); font-weight: 600; }
.inbox-resa-links { display: flex; flex-direction: column; gap: 8px; }
.inbox-resa-review { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f6; }
.inbox-resa-report { margin-top: 12px; }

/* Responsive : liste ↔ fil ; panneau résa masqué (infos dans la liste + liens) */
@media (max-width: 960px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-thread, .inbox-resa { display: none; }
  .inbox.has-thread .inbox-list { display: none; }
  .inbox.has-thread .inbox-thread { display: flex; }
  .inbox-back { display: block; }
}

/* ===================================================================== */
/* Profil « Informations personnelles »                                  */
/* ===================================================================== */
.prof { max-width: 720px; margin: 0 auto; }
.prof-intro h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--navy, #101b35); }
.prof-intro p { margin: 0 0 20px; color: #6b7280; }
.prof-empty { color: #6b7280; padding: 16px 0; }
.prof-sec { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 18px 20px; margin: 0 0 14px; }
.prof-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prof-sec-head h2 { margin: 0; font-size: 16px; color: var(--navy, #101b35); }
.prof-edit { border: 0; background: none; color: var(--pink-dark, #d92868); font-weight: 700; cursor: pointer; text-decoration: underline; font: inherit; }
.prof-view { margin: 12px 0 0; display: grid; gap: 10px; }
.prof-view > div { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: baseline; }
.prof-view dt { color: #9aa1b2; font-size: 13px; margin: 0; }
.prof-view dd { margin: 0; color: var(--navy, #101b35); font-weight: 600; word-break: break-word; }
.prof-empty-val { color: #b6bcc9 !important; font-weight: 400 !important; }
.prof-note { color: #9aa1b2 !important; font-weight: 400 !important; font-size: 13px; }
.prof-form { margin: 12px 0 0; display: grid; gap: 12px; }
.prof-field { display: grid; gap: 5px; }
.prof-field > span { font-size: 13px; color: var(--navy, #101b35); font-weight: 600; }
.prof-field input, .prof-field select { padding: 9px 11px; border: 1px solid #dfe3ee; border-radius: 10px; font: inherit; color: var(--navy, #101b35); background: #fff; }
.prof-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
/* Vérification d'identité */
.prof-id-intro { margin: 10px 0 12px; color: #4b5563; }
.prof-id-optional { color: #9aa1b2; }
.prof-id-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.prof-id-status { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: #fff; }
.prof-id-status--none { background: #9aa1b2; }
.prof-id-status--pending { background: #e0a01e; }
.prof-id-status--verified { background: #2a9d8f; }
.prof-id-status--rejected { background: #d92868; }
.prof-id-view { color: var(--pink-dark, #d92868); font-weight: 600; text-decoration: underline; }
.prof-id-upload { display: inline-block; cursor: pointer; }

/* ---- « À propos de moi » ---- */
.about { margin: 0 0 24px; }
.about-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.about-head h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--navy, #101b35); }
.about-card { display: flex; align-items: center; gap: 24px; background: #fff; border: 1px solid #e6e9f2; border-radius: 16px; padding: 20px 24px; box-shadow: 0 6px 20px rgba(16,27,53,.05); flex-wrap: wrap; }
.about-card-left { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.about-avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; cursor: pointer; background: linear-gradient(135deg,#f13e7c,#6b73a8); display: grid; place-items: center; }
.about-avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-avatar-ph { color: #fff; font-weight: 700; font-size: 28px; }
.about-avatar-edit { position: absolute; bottom: 4px; right: 4px; background: #fff; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.about-name { font-size: 20px; font-weight: 800; color: var(--navy, #101b35); }
.about-loc { font-size: 13px; color: #6b7280; }
.about-stats { display: flex; gap: 28px; margin-left: auto; }
.about-stats > div { display: flex; flex-direction: column; }
.about-stats strong { font-size: 22px; color: var(--navy, #101b35); }
.about-stats span { font-size: 12px; color: #6b7280; }
.about-meta { margin: 14px 2px; display: grid; gap: 8px; }
.about-langs, .about-verified { margin: 0; color: #4b5563; }
.about-verified.is-ok { color: #2a9d8f; font-weight: 600; }
.about-bio { margin: 6px 0 0; color: var(--navy, #101b35); white-space: pre-wrap; line-height: 1.55; }
.about-form { margin: 14px 0; display: grid; gap: 14px; background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 18px 20px; }
.about-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-form textarea { padding: 9px 11px; border: 1px solid #dfe3ee; border-radius: 10px; font: inherit; resize: vertical; }
.about-langpick { display: flex; flex-wrap: wrap; gap: 6px; }
.about-langchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #dfe3ee; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; text-transform: capitalize; }
.about-langchip.is-on { background: rgba(241,62,124,.10); border-color: var(--pink, #f13e7c); color: var(--pink-dark, #d92868); font-weight: 600; }
.about-sec { margin: 24px 0 0; }
.about-sec h2 { margin: 0 0 12px; font-size: 18px; color: var(--navy, #101b35); }
.about-trips { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.about-trip { flex: 0 0 auto; width: 160px; }
.about-trip-card { height: 110px; border: 2px solid #6b73a8; border-radius: 14px; display: grid; place-items: center; color: #6b73a8; font-weight: 700; padding: 8px; text-align: center; }
.about-trip-name { margin-top: 8px; font-weight: 600; color: var(--navy, #101b35); font-size: 14px; }
.about-trip-date { color: #9aa1b2; font-size: 12px; }
.about-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.about-review { border: 1px solid #e6e9f2; border-radius: 14px; padding: 14px 16px; background: #fff; }
.about-review-head { display: flex; align-items: center; gap: 10px; }
.about-review-ava { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#f13e7c,#6b73a8); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.about-review-author { font-weight: 700; color: var(--navy, #101b35); }
.about-review-loc { font-size: 12px; color: #9aa1b2; }
.about-review-rating { margin-left: auto; font-weight: 700; color: #2a9d8f; }
.about-review-date { color: #9aa1b2; font-size: 12px; margin: 6px 0; }
.about-review-text { margin: 0; color: var(--navy, #101b35); line-height: 1.5; }
@media (max-width: 600px) { .about-stats { margin: 12px 0 0; gap: 20px; } .about-form-row { grid-template-columns: 1fr; } }

/* ---- Wizard d'annonce : onglets d'étapes (accès direct) ---- */
.wiz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wiz-tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dfe3ee; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: #6b7280; cursor: pointer; }
.wiz-tab:hover { border-color: var(--pink, #f13e7c); color: var(--pink-dark, #d92868); }
.wiz-tab.is-active { background: var(--pink, #f13e7c); border-color: var(--pink, #f13e7c); color: #fff; }
.wiz-tab.is-done { color: var(--navy, #101b35); }
.wiz-tab-n { width: 20px; height: 20px; border-radius: 50%; background: #eef1f8; color: inherit; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.wiz-tab.is-active .wiz-tab-n { background: rgba(255, 255, 255, .25); }
@media (max-width: 640px) { .wiz-tab-label { display: none; } .wiz-tab { padding: 6px 9px; } }
/* Aide sous un libellé de champ (ex. choix de la catégorie) */
.lf-hint { display: block; margin: 2px 0 6px; font-size: 12px; font-weight: 400; color: #6b7280; line-height: 1.35; }
.lf-field select:disabled { background: #f4f5f9; color: #9aa2b1; cursor: not-allowed; }
/* Compteur +/− (étages, etc.) — libellé à gauche, contrôle à droite */
.wiz-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef1f8; }
.wiz-stepper > span { font-size: 14px; color: var(--navy, #101b35); }
.wiz-stepper-ctrl { display: inline-flex; align-items: center; gap: 12px; }
.wiz-stepper-ctrl button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #cbd2e1; background: #fff; color: var(--navy, #101b35); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.wiz-stepper-ctrl button:hover { border-color: var(--pink, #f13e7c); color: var(--pink-dark, #d92868); }
.wiz-stepper-ctrl b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
/* Étape Pièces & espaces — cartes sélectionnables */
.wiz-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.wiz-room { display: flex; flex-direction: column; }
.wiz-room-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 10px 10px 12px; border: 1px solid #dfe3ee; border-radius: 16px; background: #fff; cursor: pointer; text-align: center; transition: border-color .12s, box-shadow .12s, transform .12s; }
.wiz-room-btn:hover { border-color: #b9c1d6; transform: translateY(-2px); }
.wiz-room.is-on .wiz-room-btn { border-color: var(--navy, #101b35); box-shadow: 0 0 0 2px var(--navy, #101b35) inset; }
.wiz-room-img, .wiz-room-ph { width: 100%; height: 96px; border-radius: 12px; object-fit: contain; background: #f7f7f2; }
.wiz-room-ph { display: grid; place-items: center; font-weight: 700; color: #8a93a6; font-size: 26px; }
.wiz-room-label { font-size: 13px; font-weight: 600; color: var(--navy, #101b35); line-height: 1.25; }
.wiz-room-check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy, #101b35); color: #fff; display: grid; place-items: center; font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.wiz-room-count { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding-left: 2px; }
.wiz-room-count button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #cbd2e1; background: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.wiz-room-count button:hover { border-color: var(--pink, #f13e7c); color: var(--pink-dark, #d92868); }
.wiz-room-count b { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* Règlement intérieur — lignes tri-état + interrupteur */
.wiz-rules { display: flex; flex-direction: column; }
.wiz-rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #eef1f8; }
.wiz-rule-label { font-size: 14px; color: var(--navy, #101b35); }
.wiz-rule-label .lf-hint { margin-top: 3px; }
.wiz-rule-ctrl { display: inline-flex; gap: 8px; flex: none; }
.wiz-rule-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #cbd2e1; background: #fff; color: #6b7280; font-size: 15px; cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.wiz-rule-no.is-on { background: var(--navy, #101b35); border-color: var(--navy, #101b35); color: #fff; }
.wiz-rule-yes.is-on { background: #1d9e75; border-color: #1d9e75; color: #fff; }
.wiz-rule--switch { border-bottom: 1px solid #eef1f8; }
.wiz-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.wiz-switch input { opacity: 0; width: 0; height: 0; }
.wiz-switch-slider { position: absolute; inset: 0; background: #cbd2e1; border-radius: 999px; transition: background .15s; }
.wiz-switch-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.wiz-switch input:checked + .wiz-switch-slider { background: var(--navy, #101b35); }
.wiz-switch input:checked + .wiz-switch-slider::before { transform: translateX(20px); }
.wiz-quiet { margin: 12px 0; }
.wiz-rule-extra { margin-top: 16px; }
/* Conditions d'annulation — cartes sélectionnables */
.wiz-cancel { display: flex; flex-direction: column; gap: 4px; }
.wiz-cancel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.wiz-cancel-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 14px 16px; border: 1px solid #dfe3ee; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.wiz-cancel-card:hover { border-color: #b9c1d6; }
.wiz-cancel-card.is-on { border-color: var(--navy, #101b35); box-shadow: 0 0 0 2px var(--navy, #101b35) inset; }
.wiz-cancel-card strong { font-size: 15px; color: var(--navy, #101b35); }
.wiz-cancel-card span { font-size: 12.5px; color: #6b7280; line-height: 1.35; }
.wiz-cancel-long { margin-top: 14px; }
/* Fiche — liste du règlement intérieur */
.fiche-rules-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.fiche-rules-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy, #101b35); }
.fiche-rules-list li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; flex: none; }
.fiche-rules-list li.is-yes span { background: #e1f5ee; color: #0f6e56; }
.fiche-rules-list li.is-no span { background: #f1efe8; color: #5f5e5a; }
.fiche-rules-list li em { color: #6b7280; font-style: normal; }

/* « Où se situe le logement » — carte OSM sur la fiche */
.fiche-loc-sub { margin: 0 0 12px; color: #5f6b85; }
.listing-map { width: 100%; height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(16,27,53,.12); background: #e9eef3; }
.listing-pin { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy,#101b35); color: #fff; font-size: 20px; transform: translate(-50%,-50%); box-shadow: 0 4px 12px rgba(16,27,53,.4); border: 2px solid #fff; }
@media (max-width: 620px) { .listing-map { height: 280px; } }

/* ─── Écran « Confirmer votre demande » (récap avant réservation) ─── */
.reserve-main { max-width: 1120px; margin: 0 auto; padding: 8px 22px 40px; }
.reserve-h1 { font-size: 1.7rem; color: var(--navy,#101b35); margin: 8px 0 22px; }
.reserve-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
.reserve-left { min-width: 0; }
.reserve-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }

.reserve-panel { border: 1px solid rgba(16,27,53,.14); border-radius: 16px; padding: 22px; }
.reserve-panel-title { margin: 0 0 4px; font-size: 1.15rem; color: var(--navy,#101b35); }
.reserve-textarea { width: 100%; box-sizing: border-box; margin-top: 12px; font: inherit; padding: 12px 14px;
  border: 1px solid rgba(16,27,53,.2); border-radius: 12px; background: #fbfbfe; color: var(--navy,#101b35); resize: vertical; }
.reserve-terms { font-size: .82rem; color: #5f6b85; margin: 14px 0 12px; }
.reserve-submit { width: 100%; font-size: 1rem; padding: 14px; }

.reserve-note { margin: 0; background: var(--pink-soft,#fbe7f0); color: var(--navy,#101b35);
  border-radius: 14px; padding: 14px 16px; font-size: .9rem; font-weight: 600; }

.reserve-card { border: 1px solid rgba(16,27,53,.14); border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px rgba(16,27,53,.08); }
.reserve-card-head { display: flex; gap: 14px; align-items: center; }
.reserve-card-photo { flex: 0 0 96px; width: 96px; height: 78px; border-radius: 12px; overflow: hidden; background: #eef; }
.reserve-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reserve-card-info { min-width: 0; }
.reserve-card-info h3 { margin: 0 0 3px; font-size: 1rem; color: var(--navy,#101b35); line-height: 1.25; }
.reserve-card-loc { margin: 0; font-size: .82rem; color: #5f6b85; }
.reserve-card-rating { margin: 4px 0 0; font-size: .82rem; color: var(--navy,#101b35); }

.reserve-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef0f6; }
.reserve-block strong { display: block; color: var(--navy,#101b35); margin-bottom: 4px; }
.reserve-muted { margin: 0; color: #5f6b85; font-size: .88rem; }
.reserve-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef0f6; }
.reserve-row strong { display: block; color: var(--navy,#101b35); }
.reserve-edit { flex: none; font-size: .82rem; font-weight: 700; color: var(--navy,#101b35);
  border: 1px solid rgba(16,27,53,.2); border-radius: 8px; padding: 6px 10px; text-decoration: none; }
.reserve-edit:hover { border-color: var(--navy,#101b35); }

.reserve-price-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
  font-size: .9rem; color: var(--navy,#101b35); }
.reserve-price-line.is-discount { color: #0f6e56; }
.reserve-price-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid #eef0f6; font-weight: 800; color: var(--navy,#101b35); }

@media (max-width: 900px) {
  .reserve-grid { grid-template-columns: 1fr; gap: 22px; }
  .reserve-side { position: static; order: -1; }
}

/* ─── Page détail de réservation (mini-Airbnb) ─── */
.resa-detail{max-width:640px;margin:0 auto;}
.resa-detail-h1{font-size:1.3rem;font-weight:700;color:var(--navy,#101b35);margin:0 0 18px;}
.rd-head{text-align:center;padding:8px 0 6px;}
.rd-avatars{display:inline-flex;justify-content:center;gap:-10px;margin-bottom:14px;position:relative;}
.rd-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 16px rgba(16,27,53,.14);background:#eef1f8;}
.rd-avatar-ph{display:grid;place-items:center;font-size:2rem;font-weight:700;color:#8a93a6;}
.rd-avatar-more{width:64px;height:64px;align-self:center;margin-left:-22px;display:grid;place-items:center;font-weight:700;color:#5f6b85;font-size:1rem;}
.rd-group{font-size:1.55rem;font-weight:800;color:var(--navy,#101b35);line-height:1.15;margin:6px 0 6px;}
.rd-sub{color:#5f6b85;margin:0 0 2px;}
.rd-listing{color:#8a93a6;margin:0 0 12px;font-size:.92rem;}
.rd-card{background:#fff;border:1px solid #e7eaf3;border-radius:16px;padding:16px 18px;margin:12px 0;box-shadow:0 2px 10px rgba(16,27,53,.05);}
.rd-inout{display:flex;align-items:stretch;gap:0;}
.rd-inout>div:not(.rd-inout-sep){flex:1;display:flex;flex-direction:column;gap:2px;}
.rd-inout .rd-right{text-align:right;align-items:flex-end;}
.rd-inout>.rd-inout-sep{flex:0 0 1px;width:1px;background:#e7eaf3;margin:0 16px;align-self:stretch;}
.rd-guest-link{color:var(--navy,#101b35);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(16,27,53,.3);}
.rd-guest-link:hover{color:var(--pink-dark,#d92868);text-decoration-color:currentColor;}
.rd-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#8a93a6;font-weight:700;}
.rd-inout strong{font-size:1rem;color:var(--navy,#101b35);}
.rd-time{color:#5f6b85;font-size:.92rem;}
.rd-access{display:flex;align-items:center;gap:14px;}
.rd-access-icon{font-size:1.4rem;}
.rd-access .rd-code{font-size:1.5rem;letter-spacing:.28em;color:var(--navy,#101b35);font-variant-numeric:tabular-nums;}
.rd-block h3{font-size:1rem;font-weight:700;color:var(--navy,#101b35);margin:0 0 10px;}
.rd-block p{margin:4px 0;color:#33405c;}
.rd-message{font-style:italic;color:#5f6b85;}
.rd-muted{color:#8a93a6;font-size:.9rem;}
.rd-price{list-style:none;margin:0;padding:0;}
.rd-price li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;color:#33405c;border-bottom:1px solid #f0f2f8;}
.rd-price li:last-child{border-bottom:0;}
.rd-price b{font-variant-numeric:tabular-nums;white-space:nowrap;}
.rd-price-total{font-weight:700;color:var(--navy,#101b35);border-top:2px solid #e7eaf3!important;margin-top:4px;padding-top:10px!important;}
.rd-price-muted{color:#8a93a6;}
.rd-price-net{font-weight:700;color:#0f6e56;}
.rd-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 8px;}
/* Boutons d'action de même taille (Contacter / Payer / Annuler…). */
.rd-actions .espace-btn,.rd-actions .resa-action-btn{min-width:200px;padding:11px 18px;text-align:center;justify-content:center;box-sizing:border-box;}
.rd-actions .resa-actions{margin-top:0;gap:10px;}
.resa-detail-link{display:inline-block;margin-top:4px;color:var(--pink,#f13e7c);font-weight:600;font-size:.9rem;text-decoration:none;}
.resa-detail-link:hover{text-decoration:underline;}

/* ─── Fiche publique voyageur / hôte ─── */
.about-head-actions{display:flex;align-items:center;gap:14px;}
.about-avatar--static{cursor:default;}
.fiche-info{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.fiche-info li{display:flex;align-items:center;gap:12px;color:#33405c;font-size:.98rem;}
.fiche-info li.is-ok{color:#0f6e56;}
.fiche-info-ic{flex:none;width:22px;text-align:center;color:#8a93a6;}
.fiche-info li.is-ok .fiche-info-ic{color:#0f6e56;}

/* ─── Signalement (bouton + formulaire) ─── */
.report-link{background:none;border:none;color:#a3402f;font-size:.85rem;cursor:pointer;text-decoration:underline;padding:4px 0;}
.report-link:hover{color:#7a2b1e;}
.report-done{color:#0f6e56;font-size:.9rem;font-weight:600;}
.report-form{background:#fff;border:1px solid #f0d6cf;border-radius:14px;padding:16px;margin-top:8px;width:100%;max-width:420px;}
.report-form h4{margin:0 0 12px;font-size:1rem;color:var(--navy,#101b35);}
.report-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}
.espace-btn--danger{background:#c0392b;color:#fff;border-color:#c0392b;}
.espace-btn--danger:hover{background:#a5301f;}
.fiche-report{margin-top:18px;padding-top:12px;border-top:1px solid #eef1f8;}
/* ─── Modération des signalements ─── */
.modrep-list{display:flex;flex-direction:column;gap:14px;}
.modrep-card{background:#fff;border:1px solid #e7eaf3;border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(16,27,53,.05);}
.modrep-card.modrep-dismissed{opacity:.6;}
.modrep-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;}
.modrep-reason{font-weight:700;color:var(--navy,#101b35);}
.modrep-meta{color:#5f6b85;font-size:.9rem;margin:2px 0 8px;}
.modrep-desc{color:#33405c;margin:6px 0;white-space:pre-wrap;}
.modrep-note-done{color:#8a93a6;font-size:.9rem;font-style:italic;}
.modrep-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
.modrep-note{flex:1;min-width:160px;height:36px;border:1px solid #dfe3ee;border-radius:8px;padding:0 10px;}

/* ─── Choix « tarif non remboursable » dans le BookingBox ─── */
.bookbox-refund{display:flex;flex-direction:column;gap:6px;margin:2px 0 4px;}
.bookbox-refund-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#8a93a6;font-weight:700;}
.bookbox-refund-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #dfe3ee;border-radius:10px;cursor:pointer;font-size:.9rem;color:var(--navy,#101b35);}
.bookbox-refund-opt.is-on{border-color:var(--navy,#101b35);box-shadow:0 0 0 1px var(--navy,#101b35) inset;}
.bookbox-refund-opt input{accent-color:var(--pink,#f13e7c);}
/* Tag « non remboursable » sur le détail de réservation */
.rd-nonref{display:inline-block;margin-left:8px;font-size:.75rem;font-weight:600;color:#a15c00;background:#fbeed6;border-radius:99px;padding:2px 10px;}

/* ─── Calendrier de période (BookingBox) ─── */
/* --- Sélecteur de dates (période, façon Airbnb) --- */
.rc{position:relative;margin:4px 0 8px;}
/* Champ déclencheur : ressemble à un input dans la carte de réservation. */
.rc-field{width:100%;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  font:inherit;cursor:pointer;padding:9px 12px;border:1px solid rgba(16,27,53,.18);border-radius:10px;background:#fbfbfe;}
.rc-field:hover,.rc-field.is-open{border-color:var(--pink,#f13e7c);}
.rc-field-lbl{font-size:.72rem;font-weight:700;color:var(--navy,#101b35);text-transform:uppercase;letter-spacing:.02em;}
.rc-field-val{font-size:.92rem;color:var(--navy,#101b35);font-weight:600;}
.rc-field-val.is-empty{color:#8a93a6;font-weight:400;}
/* Dans la barre de recherche, le champ est sans bordure (il vit dans la pilule). */
.search-field .rc-field{border:none;background:transparent;padding:0;}
.search-field .rc-field:hover,.search-field .rc-field.is-open{border:none;}

.rc-pop{position:absolute;z-index:60;top:calc(100% + 10px);left:0;background:#fff;
  border:1px solid rgba(16,27,53,.12);border-radius:18px;box-shadow:0 18px 46px rgba(16,27,53,.2);padding:16px 18px 14px;}
.rc-nav{position:absolute;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid #dfe3ee;background:#fff;
  color:var(--navy,#101b35);font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:1;}
.rc-nav:hover{border-color:var(--pink,#f13e7c);color:var(--pink-dark,#d92868);}
.rc-nav--prev{left:14px;}
.rc-nav--next{right:14px;}
.rc-months{display:flex;gap:26px;}
.rc-month{width:266px;}
.rc-title{text-align:center;font-weight:700;color:var(--navy,#101b35);text-transform:capitalize;font-size:.95rem;height:34px;line-height:34px;margin-bottom:4px;}
.rc-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
.rc-wd{text-align:center;font-size:.72rem;color:#8a93a6;text-transform:uppercase;font-weight:600;}
.rc-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.rc-empty{height:38px;}
.rc-day{height:38px;border:none;background:transparent;border-radius:50%;cursor:pointer;font-size:.88rem;
  color:var(--navy,#101b35);display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background .12s;}
.rc-day:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--navy,#101b35);}
.rc-day.is-range{background:var(--pink-soft,#fbe7f0);border-radius:0;}
.rc-day.is-sel{background:var(--navy,#101b35);color:#fff;font-weight:700;}
.rc-day.is-sel.is-start{border-radius:50% 0 0 50%;}
.rc-day.is-sel.is-end{border-radius:0 50% 50% 0;}
.rc-day.is-past{color:#c9cdd8;cursor:default;}
.rc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #eef0f6;}
.rc-nights{font-size:.85rem;color:#5f6b85;font-weight:600;}
.rc-clear{background:none;border:none;color:var(--pink,#f13e7c);cursor:pointer;font-size:.85rem;text-decoration:underline;}
@media (max-width:640px){
  .rc-pop{left:50%;transform:translateX(-50%);padding:14px;}
  .rc-months{gap:0;}
  .rc-month:last-child{display:none;}
  .rc-month{width:min(280px,78vw);}
}

/* --- Sélecteur Voyageurs (adultes / enfants / bébés / animaux) --- */
.search-field--guests{position:relative;}
.guests-trigger{width:100%;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  font:inherit;cursor:pointer;border:none;background:transparent;padding:0;}
.guests-lbl{font-size:.72rem;font-weight:700;color:var(--navy,#101b35);text-transform:uppercase;letter-spacing:.02em;}
.guests-val{font-size:.92rem;color:var(--navy,#101b35);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.guests-val.is-empty{color:#8a93a6;font-weight:400;}
.guests-pop{position:absolute;z-index:60;top:calc(100% + 10px);right:0;width:min(340px,88vw);background:#fff;
  border:1px solid rgba(16,27,53,.12);border-radius:18px;box-shadow:0 18px 46px rgba(16,27,53,.2);padding:6px 18px;}
.guests-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid #eef0f6;}
.guests-row:last-child{border-bottom:none;}
.guests-row-txt{display:flex;flex-direction:column;gap:2px;}
.guests-row-lbl{font-weight:700;color:var(--navy,#101b35);font-size:.95rem;}
.guests-row-sub{font-size:.8rem;color:#8a93a6;}
.guests-stepper{display:flex;align-items:center;gap:12px;}
.guests-step{width:34px;height:34px;border-radius:50%;border:1px solid #c9cdd8;background:#fff;color:var(--navy,#101b35);
  font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .12s,color .12s;}
.guests-step:hover:not(:disabled){border-color:var(--navy,#101b35);}
.guests-step:disabled{opacity:.35;cursor:not-allowed;}
.guests-count{min-width:20px;text-align:center;font-weight:700;color:var(--navy,#101b35);font-variant-numeric:tabular-nums;}
@media (max-width:760px){
  .guests-pop{right:auto;left:0;}
}

/* --- Écran carte (résultats de recherche) --- */
.map-split{display:flex;gap:22px;align-items:flex-start;padding:8px 22px 24px;}
.map-results{flex:1 1 52%;min-width:0;}
.map-results-head{margin:6px 0 14px;}
.map-results-head h1{margin:0;font-size:1.5rem;color:var(--navy,#101b35);}
.map-results-head p{margin:4px 0 0;color:#5f6b85;font-size:.9rem;}
.map-pane{flex:1 1 48%;position:sticky;top:8px;height:calc(100vh - 96px);min-height:420px;}
.map-wrap{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;
  border:1px solid rgba(16,27,53,.12);box-shadow:0 10px 30px rgba(16,27,53,.1);}
.map-canvas{position:absolute;inset:0;background:#e9eef3;}
.leaflet-container{font:inherit;}

/* Liste (gauche) — la largeur de colonne pilote le nombre de photos. */
.map-results{container-type:inline-size;}
.map-cards{display:flex;flex-direction:column;gap:14px;}
.map-row{display:flex;gap:10px;padding:8px;text-decoration:none;color:inherit;background:#fff;
  border:1px solid rgba(16,27,53,.1);border-radius:14px;transition:box-shadow .15s,transform .15s;}
.map-row:hover{box-shadow:0 12px 26px rgba(16,27,53,.12);transform:translateY(-1px);}
.map-row-photos{flex:1 1 auto;min-width:0;display:flex;gap:6px;}
.map-ph{flex:1 1 0;min-width:0;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#eef;}
.map-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.map-ph .browse-photo-empty{width:100%;height:100%;border-radius:0;}
/* Par défaut : 1 photo ; on en révèle davantage quand la colonne s'élargit. */
.map-ph{display:none;}
.map-ph--main{display:block;}
@container (min-width:480px){ .map-ph:nth-child(-n+2){display:block;} }
@container (min-width:720px){ .map-ph:nth-child(-n+3){display:block;} }
@container (min-width:960px){ .map-ph:nth-child(-n+4){display:block;} }
@container (min-width:1180px){ .map-ph:nth-child(-n+5){display:block;} }
.map-row-info{flex:0 0 232px;padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;}
.map-row-title{margin:2px 0;font-size:1.02rem;color:var(--navy,#101b35);}

/* Pastilles de prix */
.map-pin{display:inline-block;background:#fff;color:var(--navy,#101b35);font-weight:700;font-size:.8rem;
  padding:5px 10px;border-radius:999px;white-space:nowrap;cursor:pointer;transform:translate(-50%,-50%);
  box-shadow:0 2px 8px rgba(16,27,53,.32);border:1px solid rgba(16,27,53,.12);transition:transform .1s,background .1s;}
.map-pin:hover{transform:translate(-50%,-50%) scale(1.06);}
.map-pin.is-active{background:var(--navy,#101b35);color:#fff;border-color:var(--navy,#101b35);}

/* Fiche flottante sur la carte */
.map-card{position:absolute;z-index:500;left:50%;bottom:18px;transform:translateX(-50%);width:min(310px,88%);
  background:#fff;border-radius:16px;box-shadow:0 20px 48px rgba(16,27,53,.3);overflow:hidden;}
.map-card-close{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:var(--navy,#101b35);cursor:pointer;font-size:1.2rem;line-height:1;display:grid;place-items:center;}
.map-card-photo{position:relative;aspect-ratio:16/10;background:#eef;}
.map-card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.map-card-noimg{display:grid;place-items:center;height:100%;color:#8a93a6;font-size:.85rem;}
.map-card-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(255,255,255,.94);color:var(--navy,#101b35);cursor:pointer;font-size:1.1rem;display:grid;place-items:center;box-shadow:0 2px 6px rgba(16,27,53,.2);}
.map-card-nav--prev{left:8px;}
.map-card-nav--next{right:8px;}
.map-card-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;}
.map-card-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);}
.map-card-dot.is-on{background:#fff;}
.map-card-body{display:block;padding:12px 14px;text-decoration:none;color:inherit;}
.map-card-loc{margin:0;font-size:.78rem;color:var(--pink,#f13e7c);font-weight:600;}
.map-card-title{margin:2px 0;font-size:1.02rem;color:var(--navy,#101b35);}
.map-card-sub{margin:0 0 4px;font-size:.82rem;color:#5f6b85;}
.map-card-price{margin:0;font-size:.92rem;color:var(--navy,#101b35);}
.map-card-cta{display:inline-block;margin-top:6px;font-size:.82rem;font-weight:700;color:var(--pink,#f13e7c);}

/* Desktop : hauteur bornée au viewport, la liste défile en interne (façon Airbnb). */
@media (min-width:901px){
  .map-split{height:calc(100vh - 172px);min-height:460px;overflow:hidden;}
  .map-results{height:100%;overflow-y:auto;padding-right:6px;}
  .map-pane{position:static;top:auto;height:100%;}
}
@media (max-width:900px){
  .map-split{flex-direction:column;padding:8px 14px 20px;}
  .map-results,.map-pane{flex:none;width:100%;max-width:none;}
  .map-pane{position:relative;top:0;height:68vh;order:-1;}
}