/* ==========================================================================
   SINGLE BIEN – CSS
   - Typo du thème
   - Slider + Lightbox
   - Grille / Cartes
   - Formulaire de réservation + détail du prix (frais 8%)
   - Équipements / Accessibilité (grilles avec icônes)
   - Avis
   - Bouton retour (utilise .btn-ghost déjà existant dans le thème)
   ========================================================================== */

/* Conteneur principal */
.sb.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }

/* Typo alignée au thème */
.sb, .sb * { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#111827; }
.sb h1, .sb h2, .sb h3, .sb h4 { font-family: 'Poppins', sans-serif; }

/* Titre + meta */
.sb-title { font-weight:700; margin:6px 0 6px; }
.sb-meta { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; color:#4B5563; }
.sb-meta .meta-item { display:inline-flex; align-items:center; gap:6px; }
.sb-meta .meta-item svg { fill:#9CA3AF; }
.sb-meta .star { color:#F59E0B; font-size:14px; }
.sb-meta .star.half { opacity:.6; }
.sb-meta .badge { background:#EEF2FF; color:#3730A3; border-radius:999px; padding:2px 10px; font-size:.85rem; font-weight:600; }

/* Slider (photos) */
.sb-slider { position:relative; margin:18px 0 26px; }
.sb-slider .track { display:flex; overflow:auto; scroll-snap-type:x mandatory; gap:10px; border-radius:12px; }
.sb-slider .slide { min-width:100%; scroll-snap-align:start; border-radius:12px; overflow:hidden; }
.sb-slider img { display:block; width:100%; height:360px; object-fit:cover; cursor: zoom-in; }
.sb-slider .nav { position:absolute; top:50%; transform:translateY(-50%); border:none; width:42px; height:42px; border-radius:999px; background:#ffffffcc; cursor:pointer; font-size:22px; }
.sb-slider .nav:hover { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.sb-slider .prev { left:8px; } .sb-slider .next { right:8px; }

/* Lightbox (player) */
.sb-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: none; align-items:center; justify-content:center;
  z-index: 9999;
}
.sb-lightbox[aria-hidden="false"] { display: flex; }
.sb-lightbox .lb-img {
  max-width: 92vw; max-height: 90vh;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.sb-lightbox .lb-close, .sb-lightbox .lb-nav {
  position: absolute; border: none; cursor: pointer;
  background: #ffffffcc; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.sb-lightbox .lb-close:hover, .sb-lightbox .lb-nav:hover { background: #fff; }
.sb-lightbox .lb-close { top: 16px; right: 16px; width: 42px; height: 42px; display:flex; align-items:center; justify-content:center; font-size: 22px; line-height: 1; }
.sb-lightbox .lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display:flex; align-items:center; justify-content:center; font-size: 26px; line-height: 1; }
.sb-lightbox .lb-nav.prev { left: 18px; }
.sb-lightbox .lb-nav.next { right: 18px; }
.sb-lightbox .lb-count { position: absolute; bottom: 18px; color: #fff; font-weight: 600; background: rgba(17,24,39,.45); padding: 6px 10px; border-radius: 999px; }
body.sb-lock { overflow: hidden; }

/* Grille principale */
.sb-grid { display:grid; grid-template-columns: 1.4fr .9fr; gap:20px; }
@media (max-width: 980px){ .sb-grid { grid-template-columns:1fr; } }

/* Cartes */
.sb-card { background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:16px; margin-bottom: 20px; }
.sb-card h2, .sb-card h3 { margin:0 0 10px; }

/* Zone de contenu */
.sb-content { color:#374151; line-height:1.6; }
.sb-details.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width: 700px){ .sb-details.two-cols { grid-template-columns:1fr; } }
.sb-list { margin:0; padding-left:18px; }

/* Équipements / Accessibilité */
.sb-two-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 960px){ .sb-two-cols { grid-template-columns:1fr; } }
.sb-box { background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:16px; }
.sb-box h3 { font-family:'Poppins',sans-serif; font-weight:700; color:#111827; margin:0 0 12px; }
.sb-sub   { margin:14px 0 8px; font-weight:600; color:#111827; }

.sb-amenities {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
@media (max-width: 640px){ .sb-amenities { grid-template-columns:1fr; } }
.sb-amenities .amen {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid #E5E7EB; border-radius:10px; background:#fff;
}
.sb-amenities .amen .ico svg { display:block; }
.sb-amenities .amen .txt { color:#111827; font-weight:500; }

.sb-feats { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.sb-feats li { color:#111827; }
.sb-feats strong { font-weight:600; }

/* Carte */
.sb-map { border-radius:12px; overflow:hidden; border:1px solid #E5E7EB; height:260px; }
.sb-map iframe { width:100%; height:100%; border:0; }

/* Réservation (form) */
.sb-book h3 { margin-bottom:12px; }
.sb-book .row { display:flex; gap:10px; margin-bottom:10px; }
.sb-book .row.two > * { flex:1; }
.sb-book label { display:flex; flex-direction:column; gap:6px; font-weight:600; }

.sb-book input[type="date"],
.sb-book input[type="time"],
.sb-book input[type="number"],
.sb-book select{
  height:44px; padding:0 12px;
  border:1px solid #D1D5DB; border-radius:8px; background:#fff; font-size:.95rem;
}
.sb-book input:focus, .sb-book select:focus {
  outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.sb-total { display:flex; align-items:center; justify-content:space-between; border-top:1px dashed #E5E7EB; padding-top:10px; margin-top:4px; font-size:1.05rem; }
.sb-submit { width:100%; margin-top:10px; }
.small { font-size:.85rem; color:#6B7280; }
.mt6{ margin-top:6px; } .mt8{ margin-top:8px; }

/* Détail du prix (ajouté dynamiquement par le JS si absent) */
.sb-price-note { margin-top:8px; }
.sb-price-note .link {
  background:none; border:none; padding:0;
  color:#2563EB; text-decoration:underline; cursor:pointer; font-weight:600;
}
.sb-price-note .link:hover { filter:brightness(1.05); }

.sb-breakdown[hidden] { display:none !important; }
.sb-breakdown {
  margin-top:8px; border:1px solid #E5E7EB; border-radius:10px; background:#F9FAFB; padding:10px;
}
.sb-breakdown .row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px; border-bottom:1px dashed #E5E7EB;
}
.sb-breakdown .row:last-child { border-bottom:none; }
.sb-breakdown .row.sub span { color:#374151; }
.sb-breakdown .row.fee span { color:#6B7280; }
.sb-breakdown .row.total { font-weight:700; }

/* Avis */
.sb-reviews { margin-top:28px; }
.sb-reviews h2 { margin:0 0 12px; }
.rev-track { display:flex; gap:12px; overflow:auto; scroll-snap-type:x mandatory; }
.rev-card { min-width:300px; scroll-snap-align:start; background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:12px; }
.rev-head { display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.rev-head .avatar { width:36px; height:36px; border-radius:999px; background:#E5E7EB; display:flex; align-items:center; justify-content:center; font-weight:700; }
.rev-head .name { font-weight:700; }
.rev-head .stars { color:#F59E0B; font-size:14px; letter-spacing:1px; }
.rev-text { color:#374151; }
.rev-nav { display:flex; gap:8px; justify-content:flex-end; margin:8px 0 0; }

/* Bouton "Retour" sous le header (réutilise .btn-ghost pour le style thème) */
.back-btn-wrap { padding: 12px 0 0; }
.btn-back { display:inline-flex; align-items:center; gap:8px; }
.btn-back .ico { stroke: currentColor; fill: none; }

/* ===== Modale réservation ===== */
.pp-modal{ position:fixed; inset:0; display:none; z-index:1000; }
.pp-modal[aria-hidden="false"]{ display:block; }

.pp-modal__backdrop{
  position:absolute; inset:0; background:rgba(17,24,39,.6); backdrop-filter: blur(2px);
}

.pp-modal__dialog{
  position:relative; z-index:1; max-width:520px; margin:10vh auto 0;
  background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.pp-modal__close{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  border:1px solid #E5E7EB; background:#fff; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
}
.pp-modal__icon{
  width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  margin:4px auto 10px;
}
.pp-modal__icon.success{ background:#ECFDF5; }
.pp-modal__icon.error{ background:#FEF2F2; }
.pp-modal__msg{ text-align:center; color:#6B7280; margin:8px 0 0; }
.pp-modal__actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; }

.pp-bien-review{ margin-top:24px; }
.pp-bien-review__title{ margin:0 0 8px; font-weight:700; }
.pp-bien-review__form .pp-row{ margin-bottom:12px; }
.pp-bien-review textarea{ width:100%; border:1px solid #e6e9f2; border-radius:10px; padding:12px; }
.pp-bien-review .pp-actions{ display:flex; gap:12px; align-items:center; }
.pp-bien-review .pp-hint{ color:#5b6478; margin-top:6px; }



/* ==========================================================================
   RESPONSIVE — Ajouts mobile-first (single-bien.css)
   ========================================================================== */

/* 🔹 Ultra-petits téléphones (<= 360px) */
@media (max-width: 359.98px){
  .sb.container{ padding: 20px 14px 44px; }
  .sb-title{ margin: 4px 0 6px; font-size: 1.1rem; }
  .sb-meta{ gap: 8px 10px; }
  .sb-card{ padding: 12px; border-radius: 10px; }

  /* Slider */
  .sb-slider{ margin: 14px 0 18px; }
  .sb-slider img{ height: 200px; }
  .sb-slider .nav{ width: 36px; height: 36px; font-size: 18px; }

  /* Sections & listes */
  .sb-details.two-cols{ grid-template-columns: 1fr; gap: 12px; }
  .sb-amenities{ grid-template-columns: 1fr; gap: 8px; }

  /* Réservation */
  .sb-book .row{ flex-direction: column; gap: 8px; }
  .sb-submit .btn-gradient,
  .sb-submit .btn-ghost{ width: 100%; }

  /* Carte / map */
  .sb-map{ height: 220px; }

  /* Avis */
  .rev-card{ min-width: 260px; }
  .rev-head .avatar{ width: 32px; height: 32px; }
}

/* 🔹 Petits téléphones (<= 480px) */
@media (max-width: 480px){
  .sb.container{ padding: 22px 16px 48px; }

  /* Slider */
  .sb-slider img{ height: 240px; }
  .sb-slider .prev{ left: 6px; } .sb-slider .next{ right: 6px; }

  /* Grille principale (la règle 980px force déjà 1 col, on affine juste les espaces) */
  .sb-grid{ gap: 16px; }

  /* Détails & équipements */
  .sb-box{ padding: 14px; }
  .sb-sub{ margin: 12px 0 8px; }

  /* Réservation */
  .sb-book .row.two > *{ flex: 1 1 100%; }
  .sb-total{ font-size: 1rem; }
  .sb-breakdown{ padding: 10px; }

  /* Bouton retour */
  .back-btn-wrap{ padding-top: 8px; }
  .btn-back{ gap: 6px; }

  /* Lightbox */
  .sb-lightbox .lb-img{ max-width: 96vw; max-height: 86vh; }
  .sb-lightbox .lb-nav{ width: 46px; height: 46px; font-size: 22px; }
  .sb-lightbox .lb-close{ width: 40px; height: 40px; font-size: 20px; }
  .sb-lightbox .lb-count{ bottom: 12px; }
}

/* 🔹 Téléphones “moyens” (>= 390px) */
@media (min-width: 390px){
  .sb.container{ padding-left: 20px; padding-right: 20px; }
  .sb-slider img{ height: 260px; }
}

/* 🔹 À partir de 640px (sm) */
@media (min-width: 640px){
  .sb-slider img{ height: 300px; }
  .sb-amenities{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 🔹 Tablettes (>= 768px) */
@media (min-width: 768px){
  .sb-slider img{ height: 340px; }
  .sb-details.two-cols{ grid-template-columns: 1fr 1fr; }
  .rev-card{ min-width: 300px; }
}

/* 🔹 Petits laptops (>= 1024px) */
@media (min-width: 1024px){
  .sb.container{ max-width: 1100px; }
  .sb-slider img{ height: 380px; }
}

/* 🔹 ≥ 1280px */
@media (min-width: 1280px){
  .sb-slider img{ height: 420px; }
}

/* 🔹 Écrans à faible hauteur (ex: landscape mobile, petits laptops) */
@media (max-height: 700px){
  .sb-slider img{ height: 220px; }
  .pp-modal__dialog{ margin: 6vh auto 0; }
}

/* 🔹 Landscape très bas (téléphones) */
@media (orientation: landscape) and (max-height: 480px){
  .sb-slider img{ height: 200px; }
}

/* 🔹 Safe areas (iPhone notch, etc.) */
@supports (padding: max(0px)){
  .sb.container{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* 🔹 Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .sb-slider .track,
  .rev-track{ scroll-behavior: auto; }
  .sb-slider .nav,
  .sb-lightbox .lb-nav{ transition: none; }
}