/* ==========================================================================
   POOL PARTY – Proposer un bien (multi-étapes)
   ========================================================================== */

/* Layout & titres */
.pb { padding: 20px 0 60px; }
.pb-wrap.container { max-width: 980px; margin: 0 auto; }
.pb h1 { font-family: 'Poppins', sans-serif; font-weight: 700; margin: 8px 0 18px; color: #111827; }

/* Alerts */
.pb-alert { border-radius: 10px; padding: 12px 14px; margin: 10px 0 16px; }
.pb-alert.err  { background:#FEE2E2; border:1px solid #FECACA; color:#991B1B; }
.pb-alert.warn { background:#FEF3C7; border:1px solid #FDE68A; color:#92400E; }

/* Progress */
.pb-progress { height: 6px; background:#E5E7EB; border-radius: 999px; overflow: hidden; }
.pb-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg,#2aaaff,#554dff); transition: width .25s ease; }

/* Steps */
.pb-steps { display:flex; gap:10px; padding:14px 0 8px; list-style:none; margin:0 0 8px; }
.pb-steps li { display:flex; align-items:center; gap:8px; color:#6B7280; font-weight:600; }
.pb-steps .num {
  width:24px; height:24px; border-radius:999px; background:#E5E7EB; color:#111;
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem;
}
.pb-steps li.active .num, .pb-steps li.done .num { background:#2aaaff; color:#fff; }
.pb-steps li.active span:last-child { color:#111827; }

/* Sections */
.pb-step { background:#fff; border:1px solid #E5E7EB; border-radius:10px; padding:18px; margin-top:12px; }
.pb-step h2 { font-family:'Poppins',sans-serif; font-weight:700; color:#111827; margin:6px 0 12px; }
.muted { color:#6B7280; }

/* Grilles & champs */
.pb-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pb-two-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pb-box { border:1px solid #E5E7EB; border-radius:10px; padding:12px; background:#fff; }
.pb-box h3 { margin:0 0 8px; font-weight:600; color:#111827; font-family:'Poppins',sans-serif; }

.pb-field { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.label-head { font-weight:600; color:#111827; display:inline-flex; align-items:center; gap:6px; }
.req { color:#DC2626; }

/* Inputs / selects */
.pb-field input[type="text"],
.pb-field input[type="number"],
.pb-field textarea,
.pb-field select {
  height:44px; padding:0 12px; border:1px solid #D1D5DB; border-radius:8px; background:#fff; font-size:.95rem;
}
.pb-field textarea { height:auto; min-height:110px; padding:10px 12px; }
.pb-field select:disabled { background:#F3F4F6; color:#9CA3AF; }
.pb-field input:focus, .pb-field textarea:focus, .pb-field select:focus {
  outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Boutons */
.pb-actions { display:flex; gap:10px; margin-top:12px; }
.btn-gradient {
  background: linear-gradient(90deg,#2aaaff,#554dff);
  color: #fff !important; border:none; height:44px; padding:0 16px; border-radius:10px; font-weight:600; cursor:pointer;
}
.btn-gradient:hover { filter:brightness(1.03); }
.btn-ghost {
  height:44px; padding:0 14px; border:1px solid #D1D5DB; border-radius:10px; background:#fff; cursor:pointer; font-weight:500;
}

/* Check inline */
.check-inline { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }

/* Pills installations */
.pb-pills { display:flex; gap:10px; flex-wrap:wrap; }
.pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid #E5E7EB; border-radius:999px; cursor:pointer; background:#fff;
}
.pill input { margin:0; }
.pill .ico svg { display:block; }

/* Options (accessibilité / équipements) */
.pb-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #E5E7EB; border-radius:10px; background:#fff;
}
.opt input { margin:0; }
.opt .ico svg { display:block; }

/* Dropzone */
.pb-drop { border:2px dashed #C7D2FE; background:#F8FAFF; border-radius:12px; padding:16px; text-align:center; margin:6px 0 10px; }
.pb-drop.drag { background:#EEF2FF; }
.pb-drop .link { color:#2aaaff; text-decoration:underline; cursor:pointer; }
.pb-drop input[type="file"] { display:none; }
.pb-previews { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
@media (max-width: 900px){
  .pb-grid, .pb-two-cols { grid-template-columns:1fr; }
  .pb-previews { grid-template-columns:repeat(3,1fr); }
}
.pb-thumb { position:relative; border-radius:10px; overflow:hidden; border:1px solid #E5E7EB; background:#fff; }
.pb-thumb img { width:100%; height:140px; object-fit:cover; display:block; }
.pb-thumb .badge { position:absolute; top:8px; left:8px; background:#2aaaff; color:#fff; border-radius:999px; padding:2px 8px; font-size:.75rem; }
.pb-thumb .controls { position:absolute; bottom:6px; right:6px; display:flex; gap:6px; }
.pb-thumb .icon-btn {
  border:none; background:rgba(255,255,255,.85); border-radius:999px; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.pb-thumb .icon-btn:hover { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pb-thumb .icon-btn.star svg { stroke:#2aaaff; }
.pb-thumb .icon-btn.trash svg { stroke:#ef4444; }

/* Récap */
.pb-recap { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pb-recap li { padding:10px 12px; border:1px solid #E5E7EB; border-radius:10px; background:#fff; }

/* Typographies cohérentes */
.pb, .pb * { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#111827; }
.pb h1, .pb h2, .pb h3 { font-family:'Poppins',sans-serif; }

/* assets/css/proposer-bien.css */
#pb_ville:disabled {
  color: #6B7280;
  background-color: #F9FAFB;
}

/* ==========================================================================
   Étape 4 — Tarifs & Informations (styling local)
   Ajoute la classe .pb-step-4 sur la section de l’étape 4
   ========================================================================== */

/* Grilles confort (2 colonnes sur desktop, 1 en mobile déjà géré par ton @media) */
.pb-step-4 .pb-two-cols,
.pb-step-4 .pb-grid { grid-template-columns: 1fr 1fr; }

/* Inputs/Selects un poil plus “premium” */
.pb-step-4 .pb-field input[type="text"],
.pb-step-4 .pb-field input[type="number"],
.pb-step-4 .pb-field input[type="tel"],
.pb-step-4 .pb-field select {
  height: 46px;                      /* +2px vs base */
  border-radius: 10px;               /* coins un peu plus doux */
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* Masque les “flèches” des number (prix, capacité) */
.pb-step-4 .pb-field input[type="number"]::-webkit-outer-spin-button,
.pb-step-4 .pb-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pb-step-4 .pb-field input[type="number"] { -moz-appearance: textfield; }

/* Select plus clean (flèche custom) */
.pb-step-4 .pb-field select {
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px;               /* espace pour la flèche */
}

/* État disabled (ville non sélectionnable tant que CP invalide) */
.pb-step-4 #pb_ville:disabled {
  background-color: #F9FAFB;
  color: #9CA3AF;
  border-color: #E5E7EB;
}

/* Checkbox “Enfants autorisés” bien alignée */
.pb-step-4 .check-inline input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0;
  accent-color: #2aaaff;
}
.pb-step-4 .check-inline { gap: 10px; }

/* ——————————————————————————————————————————————
   Helpers “unités” (optionnel)
   1) Entoure l’input par <div class="pb-input-unit" data-unit="€"> ... </div>
   2) Ou, sans data-attribute, ajoute la classe utilitaire .unit-euro / .unit-pers
   —————————————————————————————————————————————— */
.pb-step-4 .pb-input-unit { position: relative; }
.pb-step-4 .pb-input-unit > input { padding-right: 46px; }
.pb-step-4 .pb-input-unit::after {
  content: attr(data-unit);
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #6B7280; font-weight: 600; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  pointer-events: none;
}
/* Variantes rapides si tu préfères des classes fixes au lieu du data-attribute */
.pb-step-4 .unit-euro::after  { content: '€'; }
.pb-step-4 .unit-pers::after  { content: 'pers.'; }

/* Petits messages d’aide/erreur localisés */
.pb-step-4 .help   { color:#6B7280; font-size:.92rem; }
.pb-step-4 .errmsg { color:#B91C1C; font-size:.92rem; }

/* Boutons : légère cohérence visuelle pour l’étape */
.pb-step-4 .pb-actions .btn-gradient { min-width: 120px; }
.pb-step-4 .pb-actions .btn-ghost    { min-width: 110px; }

/* Focus encore un peu plus visible sur cette étape */
.pb-step-4 .pb-field input:focus,
.pb-step-4 .pb-field select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ===== Étape 4 — harmonisation Ville + Code postal ===== */
.pb-step-4 #pb_cp,
.pb-step-4 #pb_ville {
  width: 100%;
  max-width: 300px; /* Limite pour éviter trop large sur écrans larges */
  height: 46px;
  padding: 0 12px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  background: #fff;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* Focus identique aux autres champs */
.pb-step-4 #pb_cp:focus,
.pb-step-4 #pb_ville:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Select "Ville" : flèche custom + padding droit */
.pb-step-4 #pb_ville {
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px;
}

/* État désactivé du select Ville (avant saisie CP valide) */
.pb-step-4 #pb_ville:disabled {
  background-color: #F9FAFB;
  color: #9CA3AF;
  border-color: #E5E7EB;
}

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

/* 🔹 Ultra-petits téléphones (<= 360px) */
@media (max-width: 359.98px){
  .pb { padding: 16px 0 44px; }
  .pb-wrap.container { padding: 0 14px; }
  .pb h1 { margin: 6px 0 12px; font-size: 1.25rem; }
  .pb-step { padding: 14px; border-radius: 10px; }
  .pb-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-gradient, .btn-ghost { width: 100%; }
  .pb-previews { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pb-thumb img { height: 120px; }
  .pb-steps { gap: 8px; }
  .pb-steps .num { width: 22px; height: 22px; font-size: .8rem; }
}

/* 🔹 Petits téléphones (<= 480px) */
@media (max-width: 480px){
  .pb-wrap.container { max-width: 100%; padding: 0 16px; }
  .pb-grid, .pb-two-cols { grid-template-columns: 1fr; gap: 12px; }
  .pb-options { grid-template-columns: 1fr; gap: 8px; }
  .pb-previews { grid-template-columns: repeat(2, 1fr); }
  .pb-thumb img { height: 130px; }
  .pb-pills { gap: 8px; }
  .pill { padding: 8px 10px; }
  .pb-steps { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
  .pb-steps li { flex: 0 0 auto; }
  .pb-step h2 { margin-top: 4px; }
}

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

/* 🔹 À partir de 640px (sm) */
@media (min-width: 640px){
  .pb { padding: 20px 0 60px; }
  .pb-step { padding: 18px; }
  .pb-previews { grid-template-columns: repeat(3, 1fr); }
}

/* 🔹 Tablettes (>= 768px) */
@media (min-width: 768px){
  .pb-wrap.container { max-width: 920px; }
  .pb-grid, .pb-two-cols { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pb-options { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pb-previews { grid-template-columns: repeat(4, 1fr); }
  .pb-thumb img { height: 140px; }
}

/* 🔹 Petits laptops (>= 1024px) */
@media (min-width: 1024px){
  .pb-wrap.container { max-width: 980px; }
  .pb-previews { grid-template-columns: repeat(5, 1fr); }
}

/* 🔹 ≥ 1280px */
@media (min-width: 1280px){
  .pb-wrap.container { max-width: 1040px; }
}

/* 🔹 Déjà présent (<= 900px) : ton breakpoint garde la priorité pour passer en 1 col.
   Les rules ci-dessus complètent simplement les autres tailles.
*/

/* 🔹 Écrans à faible hauteur (ex: landscape mobile, petits laptops) */
@media (max-height: 700px){
  .pb { padding-bottom: 44px; }
  .pb-step { padding: 16px; }
}

/* 🔹 Orientation paysage très basse (téléphones) */
@media (orientation: landscape) and (max-height: 480px){
  .pb-wrap.container { padding-left: 14px; padding-right: 14px; }
  .pb-previews { grid-template-columns: repeat(3, 1fr); }
}

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

/* 🔹 Accessibilité */
@media (prefers-reduced-motion: reduce){
  .pb-progress-bar{ transition: none; }
}