/* ============================================================
   Palmabook 2026 — feuille de style complète & adaptative
   À intégrer au thème Laravel/Blade (pb-theme-2026).
   Système : turquoise (marque/CTA) + orange #fe5e00 (accent :
   prix, ⚡ instantané, étoiles, focus) + encre navy. Police Inter.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Marque (turquoise) */
  --pb-brand:#0E9E91; --pb-brand-h:#0B7F75; --pb-brand-d:#0A5C55; --pb-brand-ink:#06302C;
  --pb-brand-soft:#E3F6F3; --pb-brand-soft2:#F0FBF9;
  /* Accent (orange — tokens source) */
  --c-orange:#fe5e00; --c-orange-h:#e85400;
  /* Secondaire / liens (token source) */
  --c-blue:#1792cd; --c-blue-h:#1480b5;
  /* Encre & texte (tokens source) */
  --c-h:#0b1d2c; --c-p:#14384f; --c-dim:#5a7d91; --c-faint:#94abb8;
  /* Fonds & bordures (tokens source) */
  --c-bg:#fff; --c-bg2:#f7f7f7; --c-bg3:#efefef; --c-bdr:#ddd; --c-bdr2:#ebebeb;
  /* Sémantique */
  --c-success:#16a34a; --c-success-ink:#15803d; --c-success-bg:#ecfdf5; --c-success-bdr:#a7f3d0;
  --c-star:#fe5e00; --c-score-bg:#0b1d2c;
  /* Ombres */
  --sh-1:0 1px 2px rgba(0,0,0,.06); --sh-2:0 2px 8px rgba(0,0,0,.08);
  --sh-3:0 8px 30px rgba(0,0,0,.10); --sh-4:0 16px 38px rgba(11,29,44,.22);
  /* Espacements / rayons / type */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px;
  --r1:8px; --r2:12px; --r3:16px; --r4:18px; --r-full:9999px;
  --f:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --pb-container:1240px;
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box}
body.pb{margin:0;font-family:var(--f);color:var(--c-p);background:var(--c-bg);-webkit-font-smoothing:antialiased;line-height:1.5}
.pb h1,.pb h2,.pb h3{color:var(--c-h);margin:0;line-height:1.1;letter-spacing:-.025em}
.pb h1{font-size:clamp(33px,6.6vw,60px);font-weight:800;letter-spacing:-.04em}
.pb h2{font-size:26px;font-weight:800}
.pb h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.pb a{color:var(--c-blue);text-decoration:none}
.pb a:hover{color:var(--c-blue-h)}
.pb-container{max-width:var(--pb-container);margin:0 auto;padding:0 32px}
.pb-section{padding:48px 0}
.pb-muted{color:var(--c-dim)}
.pb-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
.pb-row::-webkit-scrollbar{display:none}

/* ---------- 3. BOUTONS ---------- */
.pb-btn{font-family:var(--f);font-weight:700;font-size:15px;border:0;border-radius:var(--r2);
  padding:14px 24px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .15s,box-shadow .15s}
.pb-btn--primary{background:var(--pb-brand);color:#fff;box-shadow:0 4px 14px rgba(14,158,145,.35)}
.pb-btn--primary:hover{background:var(--pb-brand-h)}
.pb-btn--accent{background:var(--c-orange);color:#fff}
.pb-btn--accent:hover{background:var(--c-orange-h)}
.pb-btn--ghost{background:#fff;color:var(--c-h);border:1px solid var(--c-bdr)}
.pb-btn--dark{background:var(--c-h);color:#fff}
.pb-btn--block{width:100%;justify-content:center}

/* ---------- 4. EN-TÊTE ---------- */
.pb-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--c-bdr2)}
.pb-header__inner{max-width:1320px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:22px}
.pb-logo{display:flex;align-items:center;gap:9px;cursor:pointer;flex:0 0 auto}
.pb-logo__mark{width:30px;height:30px;border-radius:50%;background:var(--pb-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.pb-logo__word{font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--c-h)}

/* ---------- 5. BARRE DE RECHERCHE ---------- */
.pb-search{background:#fff;border-radius:var(--r4);box-shadow:0 18px 50px rgba(6,48,44,.28);display:flex;align-items:stretch;padding:7px}
.pb-search__field{flex:1;padding:14px 20px;border-radius:13px;cursor:pointer}
.pb-search__field:hover{background:var(--c-bg2)}
.pb-search__label{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-h)}
.pb-search__sep{width:1px;background:var(--c-bdr2);margin:12px 0}
.pb-search__btn{flex:0 0 auto;width:60px;align-self:stretch;margin:5px;border-radius:13px;background:var(--pb-brand);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pb-search__btn:hover{background:var(--pb-brand-h)}
/* variante en-tête (focus orange, comme le site) */
.pb-search--inline{border:1px solid var(--c-orange);border-radius:var(--r-full);box-shadow:0 1px 4px rgba(254,94,0,.12);padding:5px 5px 5px 18px;align-items:center}

/* ---------- 6. FILTRES & PUCES ---------- */
.pb-filterbar{border:1px solid var(--c-bdr2);border-radius:14px;padding:13px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;box-shadow:var(--sh-1)}
.pb-chip{padding:9px 15px;border-radius:var(--r-full);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;border:1px solid var(--c-bdr);background:#fff;color:var(--c-p)}
.pb-chip.is-active{background:var(--pb-brand);color:#fff;border-color:var(--pb-brand)}
.pb-cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 18px;border-bottom:2px solid transparent;cursor:pointer;color:var(--c-dim)}
.pb-cat.is-active{color:var(--pb-brand);border-bottom-color:var(--pb-brand)}

/* ---------- 7. CARTE D'ANNONCE (ordre Booking) ---------- */
.pb-card{display:flex;gap:0;border:1px solid #e6e6e6;border-radius:var(--r3);overflow:hidden;cursor:pointer;background:#fff;box-shadow:var(--sh-1);transition:box-shadow .15s}
.pb-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.12)}
.pb-card__photo{flex:0 0 250px;align-self:stretch;min-height:224px;position:relative;background:#cad9d5}
.pb-card__body{flex:1;min-width:0;padding:15px 16px;display:flex;flex-wrap:wrap;gap:14px}
.pb-card__main{flex:1 1 240px;min-width:0}
.pb-card__side{flex:1 1 150px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;text-align:right;padding-left:16px}
.pb-card__title{font-size:17px;font-weight:700;color:var(--c-h)}
.pb-card__price{font-size:23px;font-weight:800;color:var(--c-h)}
.pb-stars{color:var(--c-star);font-size:12px;letter-spacing:1px}
.pb-badge{display:inline-flex;align-items:center;gap:3px;background:var(--pb-brand-soft);color:var(--pb-brand-h);font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.02em}
.pb-score{background:var(--c-score-bg);color:#fff;font-size:15px;font-weight:800;padding:6px 9px;border-radius:8px 8px 8px 0}
.pb-tag-free{color:var(--c-success-ink);font-weight:600;font-size:12.5px}
.pb-tag-instant{color:var(--c-orange);font-weight:600;font-size:12.5px}  /* ⚡ réservation instantanée */
.pb-card__heart{position:absolute;top:11px;right:11px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--c-p);cursor:pointer}
.pb-card__heart.is-saved{background:#FFE9DC;color:var(--c-orange)}

/* ---------- 8. VIGNETTES DESTINATION ---------- */
.pb-dest{flex:0 0 248px;scroll-snap-align:start;position:relative;height:232px;border-radius:var(--r4);overflow:hidden;cursor:pointer;box-shadow:0 4px 16px rgba(11,29,44,.12)}
.pb-dest:hover{box-shadow:var(--sh-4)}
.pb-dest__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,22,20,.74) 0%,rgba(8,22,20,.1) 52%,rgba(8,22,20,0) 100%)}
.pb-dest__body{position:absolute;left:18px;right:18px;bottom:16px;color:#fff}

/* ---------- 9. CARTE (map) + ÉPINGLE + POPUP ---------- */
.pb-map{position:relative;height:100%;border-radius:var(--r3);overflow:hidden;border:1px solid var(--c-bdr2);
  background:#E8EEEC;background-image:linear-gradient(#dbe6e3 1px,transparent 1px),linear-gradient(90deg,#dbe6e3 1px,transparent 1px);background-size:44px 44px}
.pb-pin{position:absolute;transform:translate(-50%,-50%);background:#fff;color:var(--c-h);font-size:13px;font-weight:800;padding:6px 11px;border-radius:var(--r-full);box-shadow:0 2px 8px rgba(0,0,0,.22);border:1.5px solid var(--pb-brand);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pb-pin.is-active{background:var(--c-h);color:#fff;border-color:var(--c-h)}
.pb-mapcard{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border-radius:var(--r3);box-shadow:0 14px 36px rgba(11,29,44,.3);overflow:hidden;cursor:pointer;display:flex}

/* ---------- 10. RÉSERVATION : carte + stepper + Truth Card ---------- */
.pb-bookcard{border:1px solid #e3e3e3;border-radius:var(--r4);padding:24px;box-shadow:var(--sh-3)}
.pb-picker{display:flex;align-items:center;gap:10px;border:2px solid var(--c-orange);border-radius:var(--r2);padding:11px 14px}
.pb-steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-step{display:flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;border-radius:var(--r-full)}
.pb-step.is-active{background:var(--pb-brand-soft2)}
.pb-step__n{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:#E6ECEA;color:var(--c-faint)}
.pb-step.is-active .pb-step__n,.pb-step.is-done .pb-step__n{background:var(--pb-brand);color:#fff}
.pb-truth{display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.pb-truth__total{font-size:17px;font-weight:800;color:var(--c-h)}

/* ---------- 11. PIED DE PAGE ---------- */
.pb-footer{background:var(--c-h);color:#cbd9d5}
.pb-footer__inner{max-width:var(--pb-container);margin:0 auto;padding:40px 28px 26px}
.pb-footer__cols{display:flex;flex-wrap:wrap;gap:0 32px;padding:18px 0}
.pb-footer__col{flex:1 1 160px;min-width:150px}
.pb-footer__link{display:block;font-size:13px;color:#9fc3bd;cursor:pointer;padding:4px 0}
.pb-footer__link:hover{color:#fff}
.pb-footer__bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#7e96a0}

/* ---------- 12. RESPONSIVE / ADAPTATIF ---------- */
/* Tablette : la carte (map) se masque sous 1100px → liste pleine largeur */
@media (max-width:1099px){
  .pb-results__map{display:none}
}
/* Mobile (<860px) */
@media (max-width:859px){
  .pb-container{padding:0 20px}
  .pb-search{flex-direction:column}
  .pb-search__sep{display:none}
  .pb-search__btn{width:auto;height:54px;margin:6px}
  .pb-header__nav{display:none}            /* nav repliée */
  .pb-filterbar{display:none}              /* → bouton "Filtres" + panneau */
  .pb-card{flex-direction:column}          /* photo en haut, infos dessous */
  .pb-card__photo{flex:0 0 190px;width:100%}
  .pb-card__side{align-items:flex-start;padding-left:0;text-align:left}
  .pb-bookcard--side{display:none}         /* → barre de réservation fixe en bas */
  .pb-bookbar-mobile{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--c-bdr2);box-shadow:0 -4px 16px rgba(0,0,0,.1);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .pb-h1{font-size:clamp(28px,8vw,40px)}
}
/* Grilles fluides réutilisables (sans média-queries) */
.pb-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.pb-grid-auto--wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* === PB 2026-06-30 BRIDGE : connecte le nouveau theme au markup REEL sous body.pb. =========
   Zero effet quand le theme est OFF. CHIRURGICAL : ne touche QUE les CTA de reservation.
   Le hero h1 BLANC et le footer #pbFooter navy ne sont PAS cibles -> zero regression. ====== */
body.pb a.btn-reserve, body.pb .btn-reserve, body.pb .ck-pay {
  background: var(--pb-brand) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--r2) !important;
  color: #fff !important;
  font-family: var(--f) !important;
  box-shadow: 0 4px 14px rgba(14,158,145,.35) !important;
  transition: background .2s ease, transform .15s ease !important;
}
body.pb a.btn-reserve:hover, body.pb .btn-reserve:hover, body.pb .ck-pay:hover {
  background: var(--pb-brand-h) !important; transform: translateY(-1px) !important; color:#fff !important;
}