/* ============================================================================
   patches-2026.css  —  Palmabook global CSS patch layer
   ----------------------------------------------------------------------------
   Loaded LAST in common/head.blade.php (after common.css + pb-theme-*.css) so
   it overrides them WITHOUT ever editing the 477KB minified common.css.
   Every block below fixes a REAL bug confirmed by headless render + verified
   live by CSS injection (before/after measured, no regression).
   Rollback = remove the <link> in head.blade.php, or empty this file.
   Created 2026-06-06.
   ============================================================================ */

/* --- FIX 1 — /s search, desktop (>=992px) ---------------------------------
   The "Plus De Filtres" fixed action bar (.filter-btn, holds the primary
   "Voir Les Maisons" apply CTA) kept the OLD 66.67% width from common.css
   (`.search-content-filters .filter-btn{max-width:66.66666667%}`), written for
   the former col-lg-8 results column. The 2026 redesign narrowed that column
   to 58% (map = 42%), so the bar overhung ~125px UNDER the map: the CTA was
   clipped to "Voi" and its right half was un-clickable. Match the bar to 58%.
   Verified: bar 960->835px (= column), CTA right 945->820 (clear of map@835),
   fully clickable, no horizontal scroll, idle layout unchanged.
   (Mobile <=991px keeps its own max-width:100% rule — untouched.) */
@media only screen and (min-width: 992px) {
  .search-content-filters .filter-btn { max-width: 58%; }
}

/* --- FIX 2 — /rooms/{id} listing detail, desktop (>=992px) ----------------
   The active price label ("$ N / Night", #pricing inside .booking-form.active)
   was position:fixed; top:81px and never released. After the sticky booking
   column scrolled out of view, the dark price pill stayed glued to the top of
   the viewport, floating over the Google map and the footer band. Confine it
   to its (already-sticky) booking column with position:sticky so it scrolls
   away with the form. Mobile/tablet use position:static and are excluded.
   Verified: fixed->sticky; mid-scroll still pins at top:81 as the card header;
   when the column scrolls off, the label goes with it (no longer over map/footer);
   no horizontal scroll. */
@media (min-width: 992px) {
  .detail-content .booking-form.active .price-label,
  .detail-content .booking-form.active .price-label#pricing {
    position: sticky !important;
    top: 81px !important;
    width: 100% !important;
  }
}

/* --- FIX 3 — /contact, Bootstrap md range (768–991px) ---------------------
   The bold "Feedback" label in the Contact Us form broke mid-word
   ("Feedbac" / "k") because its col-md-3 column is narrow and inherited
   overflow-wrap:break-word. These labels are single short words
   ("Name", "Email", "Feedback"), so keep them on one line. Scoped to the
   contact card only. Verified: label collapses 2 lines -> 1, no collision
   with the input column, form unchanged otherwise. */
.pb-contact-form-card .row > label.col-md-3 {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

/* --- FIX 4 — /s search: header account dropdown hidden behind the map toggle -
   On /s the header is position:fixed; z-index:999, so it is the stacking-context
   ROOT for everything inside it — the open account dropdown's own z-index:1000 is
   capped at 999 at the body level. The sticky filter toolbar (.search_filter) is
   z-index:1100, and its "Show Map / Voir la carte" control (.map-toggle-wrap)
   therefore PAINTS OVER the top of the dropdown, hiding the "Sign up" and
   "Login" items (only "Help", which sits below the toggle, stayed visible).
   Fix: while a header dropdown is OPEN, lift the header above the toolbar (1101).
   Scoped with :has(.dropdown.show) so the header only outranks the toolbar during
   that moment — the instant an item is clicked the dropdown closes, header drops
   back to 999, and login/signup MODALS (z-index ~1050) still render on top.
   Verified headless @1920: all 3 items hit-test inside the menu; modal regression
   test confirmed header reverts to 999 when the menu closes. */
body.search-page header:has(.dropdown.show) {
  z-index: 1101 !important;
}

/* === Palmabook au-dessus-de-la-flottaison RateHawk-level — 2026-06-13 ===
   Append-only en fin de public/css/patches-2026.css (charge en DERNIER => gagne).
   100% reversible (retire ce bloc). Cible des selecteurs LIVE confirmes.
   Objectif: home premium top 0.01% qui fait "wow" a un partenaire hotelier. */

/* --- HERO --- */
#hero-heading.g-title{
  font-size:clamp(30px,4.6vw,54px)!important;   /* etait 88px -> ne deborde plus */
  line-height:1.08!important; letter-spacing:-.02em!important; font-weight:800!important;
  max-width:20ch; margin:0 auto!important;
}
.g-hero{ overflow-x:hidden!important; }                /* tue le scroll horizontal parasite */
.g-hero .g-title{ margin-top:0!important; }
.g-hero .g-kicker{                                     /* cyan criard -> label premium lettre */
  color:#86efe2!important; font-size:12px!important; font-weight:700!important;
  letter-spacing:.2em!important; text-transform:uppercase;
}
.g-hero .g-subtitle{                                   /* plus lisible, mieux contraste, centre */
  color:rgba(228,243,250,.92)!important;
  font-size:clamp(15px,1.4vw,18px)!important; line-height:1.6!important;
  max-width:62ch; margin-left:auto!important; margin-right:auto!important;
}

/* --- BARRE DE RECHERCHE (logique cognitive: Destination -> Dates -> Voyageurs -> Rechercher) --- */
.g-search-form{
  background:#fff!important; border-radius:16px!important;
  box-shadow:0 18px 50px rgba(4,20,34,.28)!important;
}
/* "1 Voyageur" ne se coupe plus */
.g-search-field--guests{ min-width:132px!important; }
.g-search-field--guests *{ white-space:nowrap!important; }
/* bouton Rechercher: net, jamais coupe */
.g-search-btn{ white-space:nowrap!important; border-radius:12px!important; font-weight:700!important; }

/* --- BOUTONS --- */
.g-hero .g-btn{ border-radius:12px!important; font-weight:700!important; }
.g-hero .g-btn.g-btn-primary{ box-shadow:0 8px 22px rgba(0,166,153,.40)!important; }

/* --- CARTES "le plus regarde": radius + ombre douce + hover lift premium --- */
.pb-mv-item,.pb-most-viewed-section .card,.pb-most-viewed-section [class*="card"]{
  border-radius:16px!important; overflow:hidden;
  box-shadow:0 4px 16px rgba(8,29,44,.08)!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}
.pb-mv-item:hover,.pb-most-viewed-section .card:hover{
  transform:translateY(-4px)!important; box-shadow:0 16px 36px rgba(8,29,44,.16)!important;
}
/* CTA "host/Devenir hote" CONSERVES (Palmabook = logique marketplace Airbnb, decision Miguel 2026-06-13).
   Aucune regle ne les masque. */
/* ============ TRANSFORMATION VISUELLE PREMIUM (toutes les sections) ============ */
/* respiration / rythme premium */
.g-how,.g-company,.g-proof,.g-transparency,.g-faq,.g-final-cta,.pb-most-viewed-section,.pb-cruise-band{
  padding-top:clamp(48px,6vw,90px)!important; padding-bottom:clamp(48px,6vw,90px)!important;
}
/* titres de section: grands, serres, premium */
.g-section-head{ text-align:center!important; margin-bottom:clamp(28px,4vw,48px)!important; }
.g-section-head h2{ font-size:clamp(28px,3.4vw,42px)!important; font-weight:800!important;
  letter-spacing:-.02em!important; line-height:1.1!important; color:#0b1d2c!important; }
.g-section-head p{ font-size:clamp(15px,1.4vw,18px)!important; color:#5a7d91!important;
  max-width:60ch; margin:10px auto 0!important; }

/* "Comment reserver": pastilles accent + cartes premium */
.g-step-card{ background:#fff!important; border:1px solid #eef2f5!important; border-radius:18px!important;
  padding:clamp(24px,3vw,36px)!important; box-shadow:0 4px 18px rgba(8,29,44,.06)!important;
  transition:transform .18s ease,box-shadow .18s ease!important; }
.g-step-card:hover{ transform:translateY(-5px)!important; box-shadow:0 18px 40px rgba(8,29,44,.14)!important; }
.g-step-number{ display:inline-grid!important; place-items:center!important; width:56px!important;
  height:56px!important; border-radius:50%!important; background:linear-gradient(135deg,#00a699,#0c6a96)!important;
  color:#fff!important; font-size:22px!important; font-weight:800!important; margin-bottom:16px!important;
  box-shadow:0 8px 20px rgba(0,166,153,.35)!important; }
.g-step-card h3{ font-size:20px!important; font-weight:700!important; color:#0b1d2c!important; }

/* cartes "le plus regarde" */
.pb-mv-item{ border-radius:18px!important; }

/* section "Pourquoi" (sombre) plus saisissante */
.g-proof{ background:linear-gradient(160deg,#0b1d2c 0%,#0c2b3a 55%,#0c6a96 130%)!important; }
.g-proof .g-section-head h2{ color:#fff!important; }
.g-proof .g-section-head p{ color:rgba(222,240,247,.85)!important; }
.g-proof-card{ background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.12)!important;
  border-radius:18px!important; padding:clamp(22px,2.6vw,30px)!important; }
.g-proof-card h3{ color:#fff!important; }
.g-proof-card p{ color:rgba(222,240,247,.82)!important; }
.g-proof-icon,.g-proof-card svg{ color:#5fe6d6!important; }

/* FAQ: cartes propres */
.g-faq-item{ background:#fff!important; border:1px solid #e6ebef!important; border-radius:14px!important;
  padding:18px 22px!important; margin-bottom:12px!important; }

/* boutons coherents premium */
.g-btn{ border-radius:12px!important; font-weight:700!important; }

/* ---- bande CROISIERES ---- */
.pb-cruise-kicker{ display:inline-block!important; background:rgba(255,255,255,.18)!important; color:#fff!important;
  padding:5px 13px!important; border-radius:999px!important; font-weight:800!important; letter-spacing:.08em!important;
  font-size:11.5px!important; text-transform:uppercase!important; }
.pb-cruise-btn{ border-radius:12px!important; font-weight:700!important; box-shadow:0 8px 22px rgba(0,0,0,.18)!important; }

/* ---- cartes "LE PLUS REGARDE" (sur-mesure, sans toucher au carrousel) ---- */
.pb-mv-subtitle{ font-size:clamp(15px,1.4vw,18px)!important; color:#5a7d91!important; }
.pb-mv-item{ background:#fff!important; border:1px solid #eef2f5!important;
  box-shadow:0 4px 16px rgba(8,29,44,.07)!important; }
.pb-mv-thumb{ border-radius:18px 18px 0 0!important; overflow:hidden!important; }
.pb-mv-info{ padding:14px 16px 18px!important; }
.pb-mv-title{ font-size:16px!important; font-weight:700!important; color:#0b1d2c!important; }
.pb-mv-price-amount{ font-weight:800!important; color:#0b1d2c!important; }
.pb-mv-cta{ display:inline-block!important; border-radius:10px!important; font-weight:700!important; }

/* ---- "A PROPOS" ---- */
.g-company-card{ border-radius:18px!important; border:1px solid #eef2f5!important;
  box-shadow:0 6px 24px rgba(8,29,44,.08)!important; padding:clamp(24px,3vw,40px)!important; }

/* ---- "TRANSPARENCE" ---- */
.g-transparency-box{ border-radius:18px!important; background:#f7fafc!important; border:1px solid #e6ebef!important;
  padding:clamp(24px,3vw,40px)!important; }

/* ---- CTA FINAL ---- */
.g-final-cta h2,.g-final-cta #cta-heading{ font-size:clamp(28px,3.6vw,44px)!important; font-weight:800!important;
  letter-spacing:-.02em!important; line-height:1.1!important; }
.g-final-cta .g-btn{ box-shadow:0 10px 26px rgba(0,166,153,.4)!important; }
/* === fin bloc RateHawk-level 2026-06-13 === */

/* PB-MV-EVOLVE-START r1 */
/* Evolve "Le plus regarde" cards to RateHawk top 0.01% (2026-06-14, revertible) */
.pb-most-viewed-section .pb-mv-item{position:relative!important}
.pb-most-viewed-section .pb-mv-item::before{content:""!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:5px!important;background:linear-gradient(90deg,#004d70,#00c9b1)!important;z-index:4!important;pointer-events:none!important}
.pb-most-viewed-section .pb-mv-meta{text-transform:uppercase!important;letter-spacing:.07em!important;font-size:.72rem!important;font-weight:700!important;color:#7a8a94!important;margin-bottom:.3rem!important}
.pb-most-viewed-section .pb-mv-title{font-weight:800!important;color:#0a2a3a!important}
.pb-most-viewed-section .pb-mv-price-amount{font-weight:900!important;font-size:1.4rem!important;color:#004d70!important;line-height:1!important}
.pb-most-viewed-section .pb-mv-price-currency{font-weight:900!important;color:#004d70!important}
.pb-most-viewed-section .pb-mv-price-night{color:#8a98a0!important;font-weight:600!important}
/* PB-MV-EVOLVE-END */

/* PB-LANG-FILTER-POLISH-START r1 */
/* Filter toolbar + listing meta: respect real French sentence-case (kill forced Title Case) */
body.search-page .search-info h4{text-transform:none !important;}
body.search-page .search_filter .dropdown-toggle,
body.search-page .search_filter .dropdown-toggle span,
body.search-page .search_filter .navbar-nav li > button,
body.search-page .search_filter .navbar-nav li > button span,
body.search-page .search_filter .navbar-nav li > a{text-transform:none !important;}
/* Filter pills - RateHawk-level polish (override the small blade-inline pills) */
body.search-page .search_filter .navbar-nav{gap:10px !important;align-items:center !important;}
body.search-page .search_filter .nav-item .dropdown-toggle,
body.search-page .search_filter .nav-item > button,
body.search-page .search_filter .nav-item > .dbdate{border:1px solid #DDE3E8 !important;border-radius:999px !important;padding:9px 18px !important;font-size:13px !important;font-weight:600 !important;min-height:42px !important;background:#fff !important;color:#0B1D2C !important;box-shadow:0 1px 2px rgba(11,29,44,.05) !important;transition:all .18s ease !important;}
body.search-page .search_filter .nav-item .dropdown-toggle:hover,
body.search-page .search_filter .nav-item > button:hover,
body.search-page .search_filter .nav-item > .dbdate:hover{border-color:#0B1D2C !important;color:#0B1D2C !important;background:#fff !important;box-shadow:0 5px 16px rgba(11,29,44,.14) !important;transform:translateY(-1px) !important;}
body.search-page .search_filter .nav-item .dropdown-toggle.active,
body.search-page .search_filter .nav-item > button.active,
body.search-page .search_filter .nav-item > .dbdate.active{border-color:#004d70 !important;background:#004d70 !important;color:#fff !important;box-shadow:0 6px 18px rgba(0,77,112,.30) !important;}
/* "See Homes" CTA (raw Bootstrap btn-secondary with broken border) - target by its real classes (it lives in .search-content-filters, NOT .more-filter) */
body.search-page a.apply-filter.btn-secondary{background:linear-gradient(135deg,#004d70,#00c9b1) !important;color:#fff !important;border:none !important;border-radius:999px !important;padding:12px 30px !important;font-weight:700 !important;font-size:14px !important;box-shadow:0 6px 18px rgba(0,160,150,.30) !important;text-decoration:none !important;outline:none !important;transition:all .18s ease !important;}
body.search-page a.apply-filter.btn-secondary:hover{transform:translateY(-2px) !important;box-shadow:0 10px 28px rgba(0,160,150,.45) !important;color:#fff !important;}
body.search-page a.apply-filter.btn-secondary:focus,body.search-page a.apply-filter.btn-secondary:active{box-shadow:0 6px 18px rgba(0,160,150,.30) !important;outline:none !important;color:#fff !important;}
body.search-page .filter-btn .cancel-filter{color:#6B7785 !important;text-decoration:underline !important;font-weight:600 !important;}
/* Overlap-proof the See Homes/Cancel footer so the Compare banner / footer can never paint over it */
body.search-page .search-content-filters > .filter-btn{position:relative !important;z-index:30 !important;background:#fff !important;margin:10px 0 30px !important;padding:10px 4px !important;border-radius:14px !important;}
/* RateHawk-level listing cards: center the info group vertically so there is no empty middle gap */
body.search-page .search-list .search-info{justify-content:center !important;gap:8px !important;}
body.search-page .search-list .search-info > .search-price{margin-top:0 !important;}
body.search-page .search-list .search-info > a.text-truncate{font-size:18px !important;}
/* Language picker: clean consistent pills, active filled (fixes the lone bordered box) */
.alllanguage .modal-content{border-radius:18px !important;border:none !important;box-shadow:0 30px 80px rgba(0,40,70,.25) !important;}
.language-option h3{font-size:1.5rem !important;font-weight:800 !important;color:#0a2a3a !important;margin:0 0 18px 0 !important;}
#cls_lang{display:flex !important;flex-wrap:wrap !important;gap:12px !important;padding:0 !important;margin:0 !important;list-style:none !important;}
#cls_lang li{display:block !important;width:auto !important;flex:1 1 130px !important;padding:0 !important;}
#cls_lang li a{display:flex !important;align-items:center !important;justify-content:center !important;padding:14px 18px !important;border:1.5px solid #E6E9ED !important;border-radius:14px !important;background:#fff !important;color:#0a2a3a !important;font-weight:700 !important;text-decoration:none !important;transition:all .18s ease !important;}
#cls_lang li a:hover{border-color:#00c9b1 !important;background:#f3fffd !important;transform:translateY(-2px) !important;box-shadow:0 6px 18px rgba(0,160,150,.15) !important;}
#cls_lang li.active a{border-color:#004d70 !important;background:linear-gradient(135deg,#004d70,#00c9b1) !important;color:#fff !important;box-shadow:0 8px 22px rgba(0,160,150,.35) !important;}
/* RESPONSIVE (<992px tablet+mobile): kill the inline JS clearance margin on .search-content that
   double-counts the in-flow filter bar -> content sits right under the bar, no empty gap. */
@media (max-width:991px){
  body.search-page .search-content, body.search-page .search-content.d-flex{margin-top:0 !important;}
  /* Mobile/tablet full-screen MAP when the "Carte" button is active (was blocked by display:none) */
  body.search-page .search-map:has(.map-canvas.active){display:block !important;position:fixed !important;inset:0 !important;width:100% !important;max-width:100% !important;height:100% !important;z-index:1200 !important;background:#fff !important;padding:0 !important;}
  body.search-page .map-canvas.active{display:block !important;width:100% !important;height:100% !important;min-height:100% !important;}
  /* the Carte/Resultats FAB bar (.filter-section) is trapped at z:100 < map z:1200 -> lift it above the map so it stays clickable */
  body.search-page .filter-section{z-index:1305 !important;}
  /* Mobile filter sheets (Dates/Guests) lifted above the bar+header so they are not hidden behind them */
  body.search-page .guest-mobile-drop, body.search-page .date-mobile-drop{z-index:1400 !important;}
}
/* Stacking: the fixed site header must sit ABOVE the sticky filter bar (was z999 < filter z1100,
   so the filter bar painted OVER the header on scroll). Header on top, filter tucks under it. */
body.search-page header, body.search-page header.pb-header{z-index:1300 !important;}
body.search-page .search_filter{z-index:1090 !important;}
/* Search box placeholder: real sentence-case ("Ou allez-vous?" was Title-Cased on mobile) */
.search-modal-trigger,.search-modal-trigger span,.location.search-modal-trigger,#header-search-form,#header-search-form-mob{text-transform:none !important;}
.search-modal-trigger::placeholder,#header-search-form::placeholder,#header-search-form-mob::placeholder{text-transform:none !important;}
/* PB-LANG-FILTER-POLISH-END */

/* PB-FILTER-UI-START */
/* =====================================================================
   PALMABOOK /s — UNIFIED FILTER UI   (append to patches-2026.css, loads LAST)
   ---------------------------------------------------------------------
   Re-skins the EXISTING openable surfaces — .guest-mobile-drop,
   .date-mobile-drop, .more-filter — into ONE clean panel system, keyed off
   the app's own .active flags (search.js already enforces one-at-a-time).
   No Angular logic touched. No Angular-bound DOM re-parented.

   Breakpoints (mobile-first):
     base  <768   = full-screen sheet (sticky header / scroll body / sticky footer)
     768-991      = the SAME panel as a centered card over a scrim (listings keep full width)
     >=992        = existing anchored per-pill dropdowns + sticky map (LEFT INTACT)

   Cascade: the blade inline <style> keys off single classes (e.g. .more-filter)
   with !important. Every rule here leads with body.search-page (tag+class) so it
   wins at higher specificity AND patches-2026.css loads last. Belt + braces.
   ===================================================================== */
body.search-page{
  --pbf-ink:#0B1D2C; --pbf-dim:#6B7785; --pbf-bdr:#E6E9ED; --pbf-bdr2:#EEF1F4;
  --pbf-orange:#FE5E00;
  --pbf-cta:linear-gradient(180deg,#FF7424 0%,#FE5E00 50%,#E85400 100%);
  --pbf-shadow:0 18px 60px rgba(8,28,46,.28);
  --pbf-radius:18px;
  --pbf-head:60px;                /* sheet header row */
  --pbf-foot:74px;                /* sheet footer row (incl. padding) */
  --pbf-z:2147483000;             /* above header(1300), bar(1100), FAB(100) */
}

/* =====================================================================
   A. MOBILE + TABLET  (<=991px) — shared panel skin
   ===================================================================== */
@media (max-width:991px){

  /* ---- 0. Kill the JS-injected white gap. search_wrap() writes an inline
       margin-top (= header+bar height) on .search-content on every scroll/
       resize. The bar is in-flow (position:relative <992) and reserves its
       own space, so that margin is double-counting → the big empty band.
       JS also zeroes it live; this is the CSS guarantee. Fixes Bug 1 + Bug 3. */
  body.search-page .search-content,
  body.search-page .search-content.d-flex{ margin-top:0 !important; }

  /* keep the list laid out (changeMoreFilter adds d-none); the panel covers it */
  body.search-page .search-wrap.d-none{ display:block !important; }

  /* ---- 1. SCRIM (injected #pbf-scrim) — dims, never unmounts the list ---- */
  body.search-page #pbf-scrim{
    position:fixed !important; inset:0 !important;
    background:rgba(8,28,46,.46) !important;
    -webkit-backdrop-filter:saturate(118%) blur(1px) !important;
    backdrop-filter:saturate(118%) blur(1px) !important;
    z-index:calc(var(--pbf-z) - 1) !important;
    opacity:0 !important; visibility:hidden !important;
    transition:opacity .22s ease, visibility 0s linear .22s !important;
  }
  body.search-page.pbf-open #pbf-scrim{
    opacity:1 !important; visibility:visible !important;
    transition:opacity .22s ease, visibility 0s !important;
  }
  body.search-page.pbf-open{ overflow:hidden !important; }   /* scroll-lock */

  /* ---- 2. Hide the Carte/Resultats FAB while a sheet is open (Bug 2) ---- */
  body.search-page.pbf-open .filter-section{
    display:none !important; visibility:hidden !important; pointer-events:none !important;
  }

  /* =================================================================
     3. THE PANEL SHELL — all three surfaces, identical skin.
        Layout = single scroll box; the header is a sticky bar pinned at the
        top of that scroll box (NO DOM re-parenting), the footer is pinned to
        the viewport (mobile) / card (tablet). Content gets top+bottom padding
        so it never hides behind header or footer, and starts at the TOP
        (kills the "huge empty white gap" inside the panel).
     ================================================================= */
  body.search-page .guest-mobile-drop,
  body.search-page .date-mobile-drop,
  body.search-page .more-filter{
    position:fixed !important;
    left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    margin:0 !important;
    background:#fff !important; border:none !important; border-radius:0 !important;
    box-shadow:none !important;
    z-index:var(--pbf-z) !important;
    overflow-y:auto !important; overflow-x:hidden !important;
    overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important;
    /* content sits below the sticky header, above the fixed footer */
    padding:calc(var(--pbf-head) + 14px) 16px calc(var(--pbf-foot) + 18px) !important;
    padding-top:calc(var(--pbf-head) + env(safe-area-inset-top,0) + 14px) !important;
    /* hidden state */
    opacity:0 !important; visibility:hidden !important;
    transform:translateY(14px) !important; pointer-events:none !important;
    transition:opacity .24s ease, transform .28s cubic-bezier(.22,1,.36,1),
               visibility 0s linear .24s !important;
  }
  body.search-page .guest-mobile-drop.active,
  body.search-page .date-mobile-drop.active,
  body.search-page .more-filter.active{
    opacity:1 !important; visibility:visible !important;
    transform:translateY(0) !important; pointer-events:auto !important;
    transition:opacity .24s ease, transform .28s cubic-bezier(.22,1,.36,1),
               visibility 0s !important;
  }
  /* neutralise the inline px height the blade JS writes onto .more-filter */
  body.search-page .more-filter{ height:auto !important; }

  /* =================================================================
     4. STICKY HEADER ROW
        Guests/Dates already ship a header (.guest-mobile-top/.date-mobile-top).
        More Filters has none -> JS injects .pbf-mf-head as its first child.
        Each is sticky to the top of the scroll box.
     ================================================================= */
  body.search-page .guest-mobile-top,
  body.search-page .date-mobile-top,
  body.search-page .more-filter .pbf-mf-head{
    position:fixed !important; top:env(safe-area-inset-top,0) !important;
    left:0 !important; right:0 !important;
    display:flex !important; align-items:center !important;
    height:var(--pbf-head) !important; min-height:var(--pbf-head) !important;
    padding:0 16px !important; margin:0 !important; background:#fff !important;
    border-bottom:1px solid var(--pbf-bdr2) !important;
    z-index:2 !important;
  }
  /* Guests/Dates inner wrapper */
  body.search-page .guest-mobile-top .ml-auto,
  body.search-page .date-mobile-top .ml-auto{
    margin:0 !important; width:100% !important; text-align:left !important;
    display:flex !important; align-items:center !important; gap:8px !important;
  }
  /* titles */
  body.search-page .guest-mobile-top .ml-auto > span:first-child,
  body.search-page .date-mobile-top .ml-auto > span:first-child,
  body.search-page .more-filter .pbf-mf-head .pbf-title{
    font-size:17px !important; font-weight:800 !important; color:var(--pbf-ink) !important;
    letter-spacing:-.01em !important; margin:0 auto 0 0 !important; order:0 !important;
  }
  /* Dates "Clear" quiet link */
  body.search-page .date-mobile-top .mobile_date_clear{
    order:1 !important; margin:0 8px 0 0 !important;
    font-size:13px !important; font-weight:600 !important;
    color:var(--pbf-dim) !important; text-decoration:underline !important;
  }
  /* close (X): the existing cancel-link (Guests/Dates) + injected .pbf-close (More) */
  body.search-page .guest-mobile-top .cancel-link,
  body.search-page .date-mobile-top .cancel-link,
  body.search-page .more-filter .pbf-mf-head .pbf-close{
    order:2 !important; margin:0 !important;
    width:36px !important; height:36px !important; flex:0 0 36px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    border-radius:50% !important; border:1px solid var(--pbf-bdr) !important;
    background:#fff !important; padding:0 !important; cursor:pointer !important;
    font-size:0 !important; line-height:0 !important; color:transparent !important;
    text-decoration:none !important;
    transition:background .15s ease, border-color .15s ease !important;
  }
  body.search-page .guest-mobile-top .cancel-link:hover,
  body.search-page .date-mobile-top .cancel-link:hover,
  body.search-page .more-filter .pbf-mf-head .pbf-close:hover{
    background:#F4F6F8 !important; border-color:var(--pbf-ink) !important;
  }
  /* X glyph: cancel-links via ::before, .pbf-close ships an inline <svg> */
  body.search-page .guest-mobile-top .cancel-link::before,
  body.search-page .date-mobile-top .cancel-link::before{
    content:"" !important; display:block !important; width:14px !important; height:14px !important;
    background:no-repeat center/14px 14px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%230B1D2C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }
  body.search-page .more-filter .pbf-mf-head .pbf-close svg{ width:14px !important; height:14px !important; display:block !important; }
  body.search-page .more-filter .pbf-mf-head .pbf-close svg path{ stroke:var(--pbf-ink) !important; }

  /* =================================================================
     5. SCROLL BODY — the surfaces' own content blocks.
        For Guests/Dates the body rows already exist; just space them.
        For More Filters the original children scroll inside .more-filter.
     ================================================================= */
  body.search-page .guest-mobile-info{
    display:flex !important; align-items:center !important;
    padding:6px 2px 0 !important; margin:0 !important;
  }
  body.search-page .date-mobile-info{ padding:0 !important; margin:0 !important; }
  body.search-page .more-filter > div{ margin:0 0 20px !important; }
  body.search-page .more-filter h4{ color:var(--pbf-ink) !important; }

  /* =================================================================
     6. FOOTER (action row)  — pinned to the viewport bottom on mobile.
        Guests/Dates: their own .filter-btn (See Homes).
        More Filters: the SIBLING .search-content-filters > .filter-btn
                      (See Homes + Effacer), only while open.
     ================================================================= */
  body.search-page .guest-mobile-drop > .filter-btn,
  body.search-page .date-mobile-drop > .filter-btn,
  body.search-page .search-content-filters.active > .filter-btn{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; max-width:100% !important; margin:0 !important;
    min-height:var(--pbf-foot) !important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0)) !important;
    background:#fff !important; border-top:1px solid var(--pbf-bdr2) !important;
    z-index:calc(var(--pbf-z) + 1) !important;
    display:flex !important; align-items:center !important; gap:12px !important;
    box-shadow:0 -2px 14px rgba(8,28,46,.08) !important;
  }
  body.search-page .guest-mobile-drop > .filter-btn,
  body.search-page .date-mobile-drop > .filter-btn{ justify-content:center !important; }
  body.search-page .search-content-filters.active > .filter-btn{ justify-content:space-between !important; }

  /* shared CTA skin (See Homes) */
  body.search-page .guest-mobile-drop > .filter-btn .seehome,
  body.search-page .date-mobile-drop > .filter-btn .seehome,
  body.search-page .search-content-filters.active > .filter-btn .apply-filter{
    background:var(--pbf-cta) !important; border:none !important; color:#fff !important;
    border-radius:14px !important; min-height:50px !important;
    font-weight:700 !important; font-size:16px !important; text-decoration:none !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    box-shadow:0 6px 18px rgba(254,94,0,.30) !important;
  }
  body.search-page .guest-mobile-drop > .filter-btn .seehome,
  body.search-page .date-mobile-drop > .filter-btn .seehome{ flex:1 1 auto !important; width:100% !important; }
  body.search-page .search-content-filters.active > .filter-btn .apply-filter{
    flex:1 1 auto !important; width:auto !important; max-width:none !important; margin:0 !important;
  }
  body.search-page .search-content-filters.active > .filter-btn .cancel-filter{
    flex:0 0 auto !important; order:-1 !important; margin:0 !important;
    font-size:15px !important; font-weight:600 !important; color:var(--pbf-ink) !important;
    text-decoration:underline !important; white-space:nowrap !important;
  }

  /* More Filters: .search-content-filters.active creates a stacking context that TRAPPED its footer
     (Annuler / Voir les maisons) BELOW #pbf-scrim -> uncloseable. Lift the whole column above the scrim. */
  body.search-page .search-content-filters.active{ position:relative !important; z-index:var(--pbf-z) !important; }

  /* =================================================================
     7. daterangepicker fits the sheet body (it mounts in #daterangepicker_modal_div)
     ================================================================= */
  body.search-page .date-mobile-info .custom-datepicker,
  body.search-page .date-mobile-info .daterangepicker{
    position:static !important; display:block !important; width:100% !important;
    margin:0 auto !important; border:none !important; box-shadow:none !important;
    background:transparent !important; float:none !important; inset:auto !important;
  }
  body.search-page .date-mobile-info .daterangepicker:before,
  body.search-page .date-mobile-info .daterangepicker:after{ display:none !important; }
  body.search-page .date-mobile-info .drp-calendar{ max-width:none !important; float:none !important; }
}

/* =====================================================================
   B. TABLET ONLY (768-991px) — centered CARD, not full-screen.
      Listings keep full width behind the scrim → no empty gap (Bug 3).
   ===================================================================== */
@media (min-width:768px) and (max-width:991px){
  body.search-page .guest-mobile-drop,
  body.search-page .date-mobile-drop,
  body.search-page .more-filter{
    top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
    width:min(560px,calc(100vw - 48px)) !important; max-width:560px !important;
    height:auto !important; max-height:min(82vh,720px) !important;
    border-radius:var(--pbf-radius) !important; box-shadow:var(--pbf-shadow) !important;
    /* card scrolls internally; footer is absolute to the card, so reserve foot space */
    padding-bottom:calc(var(--pbf-foot) + 8px) !important;
    transform:translate(-50%,-50%) scale(.97) !important;
  }
  body.search-page .guest-mobile-drop.active,
  body.search-page .date-mobile-drop.active,
  body.search-page .more-filter.active{
    transform:translate(-50%,-50%) scale(1) !important;
  }
  /* header rounds with the card and stays pinned to the card top (absolute) */
  body.search-page .guest-mobile-top,
  body.search-page .date-mobile-top,
  body.search-page .more-filter .pbf-mf-head{
    position:absolute !important; top:0 !important;
    border-radius:var(--pbf-radius) var(--pbf-radius) 0 0 !important;
  }
  /* footers anchor to the CARD (absolute), not the viewport */
  body.search-page .guest-mobile-drop > .filter-btn,
  body.search-page .date-mobile-drop > .filter-btn,
  body.search-page .search-content-filters.active > .filter-btn{
    position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important;
    width:100% !important; border-radius:0 0 var(--pbf-radius) var(--pbf-radius) !important;
    box-shadow:none !important;
  }
}

/* =====================================================================
   C. DESKTOP (>=992px) — leave the existing anchored dropdowns + sticky map
      fully intact. Only neutralise our injected helpers.
   ===================================================================== */
@media (min-width:992px){
  body.search-page #pbf-scrim{ display:none !important; }
  body.search-page .more-filter .pbf-mf-head{ display:none !important; }
}

/* PB-FILTER-UI-END */

/* PB-FILTER-R2-START */
/* =====================================================================
   PALMABOOK /s — FILTER UI · ROUND 2 (FINAL, ADDITIVE)
   ---------------------------------------------------------------------
   APPEND AFTER _filter_ui_final.css. 100% additive overrides + polish.
   Combines the four verified round-2 refinements:
     1. Voyageurs <768 sheet: kill the empty middle (center the single
        stepper, card it, add an injected helper subtitle + icon).
     2. 768-991 TABLET: turn the app's REAL anchored Bootstrap
        .dropdown-menu.show (room/price/instant — verified via search.js
        update_opened_filter + data-toggle="dropdown") into a centered
        modal card over the existing scrim. Guests/Dates/More already use
        the *-mobile-drop / .more-filter surfaces handled by Section B of
        the base file — left intact.
     3. Micro-polish: daterangepicker, noUiSlider, checkbox/stepper states,
        CTA + "Effacer/Annuler" consistency across every surface.
     4. Copy: "Equipements" stopgap (proper fix = delete the duplicate FR
        lang key; see label_fix). CSS hides the stale node, JS swaps text.

   CASCADE CONTRACT (same as round 1): every rule leads with
   body.search-page + !important, this file loads LAST. It NEVER re-declares
   the open/close drivers (position / visibility / opacity / transform of
   .active, #pbf-scrim, body.pbf-open scroll-lock, FAB-hide). Verified
   open/close path stays byte-for-byte. Desktop >=992 is explicitly guarded.
   ===================================================================== */
body.search-page{
  --pbf-soft:#FBFCFD;            /* soft card fill */
  --pbf-soft-bdr:#EAEDF1;
  --pbf-helper:#8A95A2;          /* subtitle / helper ink */
  --pbf-tint:#FFF3EC;            /* orange wash: icons + checked fill */
  --pbf-chk:#FE5E00;             /* checked accent */
  --pbf-card-radius:16px;
  --pbf-s2:10px; --pbf-s3:14px; --pbf-s4:18px; --pbf-s5:24px;
}

/* =====================================================================
   R2-A. MOBILE + TABLET shared polish (<=991px)
   ===================================================================== */
@media (max-width:991px){

  body.search-page .guest-mobile-drop,
  body.search-page .date-mobile-drop,
  body.search-page .more-filter,
  body.search-page .nav-item .dropdown-menu{
    -webkit-font-smoothing:antialiased !important;
  }

  /* -----------------------------------------------------------------
     0. TABLET DROPDOWN OPEN -> turn on the EXISTING scrim/lock/FAB-hide.
        The base file drives these off body.pbf-open (mirrors .active).
        On tablet the room/price/instant pills open a Bootstrap
        .dropdown-menu.show with NO .active flag, so the R2 JS sets a
        SEPARATE flag body.pbf-dd-open (never touching the base writer =>
        zero thrash). We mirror the base scrim/lock/FAB triggers onto it.
        Scoped <=991 here; only ever set by JS at 768-991 (see R2 JS).
     ----------------------------------------------------------------- */
  /* R2-B tablet-modal DISABLED -> no tablet-dropdown scrim. Tablet keeps the working anchored dropdown. */

  /* -----------------------------------------------------------------
     1. VOYAGEURS SHEET (<768 full-screen / 768-991 see R2-B): one +/-
        stepper was floating in a void. Center the single control block
        vertically, dress it as a soft card with an icon medallion + an
        injected helper subtitle (.pbf-guest-help added by the R2 JS).
        Targets the REAL DOM: .guest-mobile-info > label + .value-changer
        (blade 1199-1207). No DOM re-parenting; only visual props + flex
        order. Does NOT touch .active visibility => open/close intact.
     ----------------------------------------------------------------- */
  body.search-page .guest-mobile-drop.active{
    display:flex !important; flex-direction:column !important;
  }
  /* the single body row becomes a centered hero card */
  body.search-page .guest-mobile-drop .guest-mobile-info{
    flex:0 0 auto !important;
    margin:auto 2px !important;                 /* auto top+bottom => dead-center */
    width:auto !important;
    flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    text-align:center !important; gap:0 !important;
    background:var(--pbf-soft) !important;
    border:1px solid var(--pbf-soft-bdr) !important;
    border-radius:20px !important;
    box-shadow:0 1px 2px rgba(11,29,44,.05), 0 10px 28px rgba(11,29,44,.06) !important;
    padding:var(--pbf-s5) var(--pbf-s4) calc(var(--pbf-s5) + 2px) !important;
    position:relative !important;
  }
  /* friendly people-icon medallion above the control (pure CSS ::before) */
  body.search-page .guest-mobile-drop .guest-mobile-info::before{
    content:"" !important; display:block !important;
    width:56px !important; height:56px !important; margin:0 auto var(--pbf-s4) !important;
    border-radius:50% !important;
    background:var(--pbf-tint) no-repeat center / 28px 28px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23FE5E00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
    box-shadow:inset 0 0 0 1px rgba(254,94,0,.10) !important;
  }
  /* the "Voyageur" label becomes the card title */
  body.search-page .guest-mobile-drop .guest-mobile-info > label{
    order:0 !important; display:block !important;
    margin:0 0 4px !important; padding:0 !important; width:100% !important;
    font-size:20px !important; font-weight:800 !important; letter-spacing:-.02em !important;
    color:var(--pbf-ink) !important; text-transform:capitalize !important;
    text-align:center !important; line-height:1.2 !important;
  }
  /* injected helper subtitle */
  body.search-page .guest-mobile-drop .pbf-guest-help{
    order:1 !important; display:block !important;
    margin:0 auto var(--pbf-s5) !important; max-width:300px !important;
    font-size:14px !important; line-height:1.45 !important;
    color:var(--pbf-helper) !important; text-align:center !important;
  }
  /* the stepper sits in its own pill row, generously sized + centered */
  body.search-page .guest-mobile-drop .guest-mobile-info .value-changer{
    order:2 !important; margin:0 auto !important;
    width:min(260px,100%) !important;
    justify-content:space-between !important; align-items:center !important; gap:0 !important;
  }
  body.search-page .guest-mobile-drop .value-changer .value-button{
    width:48px !important; height:48px !important; flex:0 0 48px !important;
    border-radius:50% !important; border:1.5px solid var(--pbf-bdr) !important;
    background:#fff !important; color:var(--pbf-ink) !important;
    font-size:24px !important; line-height:1 !important; font-weight:400 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    padding:0 !important; transition:border-color .15s ease, background .15s ease, transform .08s ease !important;
  }
  body.search-page .guest-mobile-drop .value-changer .value-button:hover{
    border-color:var(--pbf-ink) !important;
  }
  body.search-page .guest-mobile-drop .value-changer .value-button:active{ transform:scale(.92) !important; }
  body.search-page .guest-mobile-drop .value-changer .value-button[disabled]{
    opacity:.4 !important; border-color:var(--pbf-bdr) !important; cursor:not-allowed !important;
  }
  body.search-page .guest-mobile-drop .value-changer .guest-input{
    width:64px !important; min-width:0 !important; border:none !important; background:transparent !important;
    text-align:center !important; font-size:22px !important; font-weight:800 !important;
    color:var(--pbf-ink) !important; box-shadow:none !important; padding:0 !important; margin:0 8px !important;
  }

  /* -----------------------------------------------------------------
     3a. CHECKBOX + STEPPER STATES — clear, consistent across surfaces.
         room-type / amenities / property_type checkboxes + their labels.
     ----------------------------------------------------------------- */
  body.search-page .more-filter input.room-type,
  body.search-page .more-filter input.amenities,
  body.search-page .more-filter input.property_type{
    -webkit-appearance:none !important; appearance:none !important;
    width:22px !important; height:22px !important; flex:0 0 22px !important;
    margin:0 10px 0 0 !important; border:1.5px solid var(--pbf-bdr) !important;
    border-radius:7px !important; background:#fff !important; cursor:pointer !important;
    position:relative !important; transition:border-color .15s ease, background .15s ease !important;
  }
  body.search-page .more-filter input.room-type:checked,
  body.search-page .more-filter input.amenities:checked,
  body.search-page .more-filter input.property_type:checked{
    background:var(--pbf-chk) !important; border-color:var(--pbf-chk) !important;
  }
  body.search-page .more-filter input.room-type:checked::after,
  body.search-page .more-filter input.amenities:checked::after,
  body.search-page .more-filter input.property_type:checked::after{
    content:"" !important; position:absolute !important; left:7px !important; top:3px !important;
    width:5px !important; height:10px !important; border:solid #fff !important;
    border-width:0 2px 2px 0 !important; transform:rotate(45deg) !important;
  }
  body.search-page .more-filter input.room-type:focus-visible,
  body.search-page .more-filter input.amenities:focus-visible,
  body.search-page .more-filter input.property_type:focus-visible{
    outline:2px solid rgba(254,94,0,.45) !important; outline-offset:2px !important;
  }
  body.search-page .more-filter .filter-list label,
  body.search-page .more-filter .room-type-list label{
    font-size:15px !important; color:var(--pbf-ink) !important; cursor:pointer !important;
    line-height:1.3 !important; margin:0 !important;
  }
  /* see-all / close toggle reads as a quiet pill */
  body.search-page .more-filter .show-all-toggle .all-property,
  body.search-page .more-filter .show-all-toggle .close-property{
    font-size:14px !important; font-weight:600 !important; color:var(--pbf-orange) !important;
    cursor:pointer !important;
  }

  /* -----------------------------------------------------------------
     3b. noUiSlider PRICE — clean track, round handles, fits the sheet.
         Mobile slider = #mob_slider (.filter-price, d-md-none); tablet
         price = #slider inside the .dropdown-menu (see R2-B card).
     ----------------------------------------------------------------- */
  body.search-page .price-range-slider.noUi-target{
    height:5px !important; border:none !important; border-radius:6px !important;
    background:var(--pbf-bdr) !important; box-shadow:none !important;
    margin:18px 8px 8px !important;
  }
  body.search-page .price-range-slider .noUi-connect{ background:var(--pbf-chk) !important; }
  body.search-page .price-range-slider .noUi-handle{
    width:26px !important; height:26px !important; right:-13px !important; top:-11px !important;
    border:1.5px solid var(--pbf-bdr) !important; border-radius:50% !important;
    background:#fff !important; box-shadow:0 2px 8px rgba(8,28,46,.18) !important;
    cursor:grab !important;
  }
  body.search-page .price-range-slider .noUi-handle:before,
  body.search-page .price-range-slider .noUi-handle:after{ display:none !important; }
  body.search-page .price-range-slider .noUi-handle:active{ cursor:grabbing !important; }
  body.search-page .price-label .price{ font-weight:800 !important; color:var(--pbf-ink) !important; }
  body.search-page .price-label .price-min{ color:var(--pbf-ink) !important; font-size:16px !important; }

  /* -----------------------------------------------------------------
     3c. daterangepicker — clean cells, rounded selection, fits the sheet.
         (Base file already neutralised its positioning; this is skin.)
     ----------------------------------------------------------------- */
  body.search-page .date-mobile-info .daterangepicker td,
  body.search-page .date-mobile-info .daterangepicker th{
    border-radius:50% !important; font-size:14px !important; height:38px !important; width:38px !important;
  }
  body.search-page .date-mobile-info .daterangepicker td.available:hover{
    background:var(--pbf-tint) !important; color:var(--pbf-ink) !important;
  }
  body.search-page .date-mobile-info .daterangepicker td.active,
  body.search-page .date-mobile-info .daterangepicker td.active:hover{
    background:var(--pbf-chk) !important; color:#fff !important;
  }
  body.search-page .date-mobile-info .daterangepicker td.in-range{
    background:var(--pbf-tint) !important; color:var(--pbf-ink) !important; border-radius:0 !important;
  }
  body.search-page .date-mobile-info .daterangepicker td.start-date{ border-radius:50% 0 0 50% !important; }
  body.search-page .date-mobile-info .daterangepicker td.end-date{ border-radius:0 50% 50% 0 !important; }
  body.search-page .date-mobile-info .daterangepicker .month{
    font-weight:800 !important; color:var(--pbf-ink) !important;
  }
  body.search-page .date-mobile-info .daterangepicker td.off{ color:#C7CDD4 !important; }

  /* -----------------------------------------------------------------
     3d. CTA + "Effacer / Annuler" CONSISTENCY across every surface.
     ----------------------------------------------------------------- */
  body.search-page .guest-mobile-drop .filter-btn .seehome,
  body.search-page .date-mobile-drop .filter-btn .seehome{
    letter-spacing:-.01em !important;
  }

  /* -----------------------------------------------------------------
     4. "Equipements" COPY STOPGAP (CSS half).
        The amenities heading renders messages.lys.amenities which a
        duplicate FR key shadows to "Mettre a jour les equipements".
        PROPER FIX = delete the duplicate lang key (see label_fix).
        If the lang file cannot be edited: the R2 JS rewrites the text and
        flags the node .pbf-amen-hide; this rule then renders a crisp label
        with no flash, and has ZERO effect if JS is off (we never blanket-
        hide the heading, so it stays visible if JS fails).
     ----------------------------------------------------------------- */
  body.search-page .more-filter .filter-list h4.pbf-amen-hide{
    font-size:0 !important;                /* collapse stale glyphs */
  }
  body.search-page .more-filter .filter-list h4.pbf-amen-hide::after{
    content:"Équipements" !important; font-size:13px !important; font-weight:800 !important;
    letter-spacing:.02em !important; text-transform:uppercase !important; color:var(--pbf-ink) !important;
  }
}

/* =====================================================================
   R2-B. TABLET ONLY (768-991px) — the REAL anchored Bootstrap dropdowns
          (room/price/instant) become a CENTERED MODAL CARD over the scrim,
          matching the mobile-sheet skin. Verified: search.js
          update_opened_filter has NO width guard and adds no *-mobile-drop
          for room/price/instant, so on tablet these render purely as the
          Bootstrap .dropdown-menu.show anchored under each pill (the gap
          the brief describes). Guests/Dates/More keep using the
          *-mobile-drop / .more-filter surfaces from the base Section B.

   SAFETY:
   - Bound strictly to (min-width:768px) and (max-width:991px).
   - SCOPED .nav-item:not(.guest-filter-btn): guests has its OWN
     .guest-mobile-drop card AND search.js line 914 strips its .show, so
     we must not modal-ize it (kills the two-competing-cards / flash risk).
   - close-on-scrim already works (base scrim handler + Bootstrap outside-
     click; R2 JS also clicks the open toggle as a fallback).
   - body.pbf-dd-open is set ONLY by the R2 JS (a separate flag from the
     base pbf-open => zero two-writer thrash) to turn on the EXISTING
     scrim / scroll-lock / FAB-hide.
   - Desktop >=992 is RESET in R2-C so none of these rules can ever reach
     the anchored desktop dropdowns + sticky map.
   ===================================================================== */
@media (min-width:99999px){ /* R2-B DISABLED: centered-modal-card on tablet fought Popper.js (off-screen). Tablet uses the working anchored Bootstrap dropdown (round-1). */

  /* Lift the OPEN room/price/instant dropdown-menu into a centered modal card. */
  body.search-page .navbar-nav .nav-item.dropdown:not(.guest-filter-btn) .dropdown-menu.show{
    position:fixed !important;
    top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important; float:none !important; inset:auto !important;
    width:min(540px,calc(100vw - 48px)) !important; max-width:540px !important;
    max-height:min(82vh,720px) !important; overflow-y:auto !important;
    overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important;
    background:#fff !important; border:none !important;
    border-radius:var(--pbf-radius) !important; box-shadow:var(--pbf-shadow) !important;
    z-index:var(--pbf-z) !important;
    padding:22px 22px calc(var(--pbf-foot) + 8px) !important;
    animation:pbfCardIn .22s cubic-bezier(.22,1,.36,1) !important;
  }
  @keyframes pbfCardIn{
    from{ opacity:0; transform:translate(-50%,-50%) scale(.97); }
    to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  }

  /* inner spacing + headings inside the card */
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show > .d-flex,
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show > div:not(.filter-btn){
    margin-bottom:var(--pbf-s4) !important;
  }
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show h4{
    font-size:16px !important; font-weight:800 !important; color:var(--pbf-ink) !important;
  }
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show label{
    font-size:15px !important; color:var(--pbf-ink) !important;
  }
  /* the dropdown's own filter-btn (Annuler / Appliquer) pinned to the card foot */
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show .filter-btn{
    position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
    margin:0 !important; padding:12px 18px !important;
    background:#fff !important; border-top:1px solid var(--pbf-bdr2) !important;
    border-radius:0 0 var(--pbf-radius) var(--pbf-radius) !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:12px !important;
  }
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show .filter-btn .apply-filter{
    background:var(--pbf-cta) !important; border:none !important; color:#fff !important;
    border-radius:12px !important; min-height:44px !important; padding:0 22px !important;
    font-weight:700 !important; font-size:15px !important; text-decoration:none !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    box-shadow:0 6px 18px rgba(254,94,0,.30) !important; flex:0 0 auto !important;
  }
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show .filter-btn .cancel-filter{
    order:-1 !important; flex:0 0 auto !important; margin:0 !important;
    font-size:15px !important; font-weight:600 !important; color:var(--pbf-ink) !important;
    text-decoration:underline !important; white-space:nowrap !important;
  }
  /* tablet price slider track breathing room inside the card */
  body.search-page .nav-item:not(.guest-filter-btn) .dropdown-menu.show #slider{ margin:22px 8px 8px !important; }
}

/* =====================================================================
   R2-C. DESKTOP (>=992px) — GUARD. Explicitly restore Bootstrap defaults
          for .dropdown-menu so NONE of the R2-B tablet-modal rules can
          leak to the anchored desktop dropdowns + sticky map. Additive,
          only resets the props R2-B touches; introduces no new desktop
          styling. Round-1 Section C is preserved (loads before this).
   ===================================================================== */
@media (min-width:992px){
  body.search-page .navbar-nav .nav-item.dropdown .dropdown-menu,
  body.search-page .navbar-nav .nav-item.dropdown .dropdown-menu.show{
    position:absolute !important;
    top:100% !important; left:0 !important; right:auto !important; bottom:auto !important;
    transform:none !important; inset:auto !important; float:none !important;
    width:auto !important; max-width:none !important; max-height:none !important;
    overflow:visible !important; box-shadow:0 8px 30px rgba(8,28,46,.14) !important;
    z-index:1000 !important; animation:none !important;
  }
  /* let the desktop dropdown's footer return to in-flow */
  body.search-page .navbar-nav .nav-item.dropdown .dropdown-menu .filter-btn{
    position:static !important; border-top:none !important; background:transparent !important;
  }
}
/* PB-FILTER-R2-END */

/* PB-DATE-R3-START */
/* =====================================================================
   PALMABOOK /s — DATE FILTER · ROUND 3 (EASY + COGNITIVE) [ADDITIVE]
   ---------------------------------------------------------------------
   APPEND AFTER _filter_ui_final.css + _filter_r2.css (loads LAST in
   patches-2026.css). 100% additive. Makes the EXISTING
   bootstrap-daterangepicker unmistakable + effortless WITHOUT replacing
   it and WITHOUT touching open/close, apply, or clear.

   It styles ONLY:
     - the picker's OWN day cells (range band, filled start/end, today ring,
       big touch targets) on BOTH instances, reached via the R3-injected
       host class .pbf-date-host (+ .pbf-host-sheet mobile / .pbf-host-pill
       desktop) that the R3 JS adds to each .daterangepicker ROOT;
     - injected helper nodes: .pbf-date-summary (Arrivee -> Depart),
       .pbf-date-nights (live "N nuits"), .pbf-date-chips / .pbf-chip.

   CASCADE CONTRACT (same as R1/R2): every rule leads with body.search-page
   + !important; loads last. It NEVER re-declares the open/close drivers
   (.active visibility/opacity/transform, #pbf-scrim, body.pbf-open
   scroll-lock, FAB-hide) and NEVER changes the picker's position/width that
   R1 set. No fixed cell WIDTH (cells stay 14.2857% auto-fit) so 7 columns
   never overflow at 320px; the big touch target comes from HEIGHT only.
   ===================================================================== */
body.search-page{
  --pbd-ink:#0B1D2C; --pbd-dim:#6B7785; --pbd-bdr:#E6E9ED; --pbd-bdr2:#EEF1F4;
  --pbd-orange:#FE5E00; --pbd-tint:#FFF3EC; --pbd-soft:#FBFCFD;
  --pbd-band:#FFE7D6;            /* soft tinted in-range band */
  --pbd-sel:#FE5E00;             /* selected start/end fill */
}

/* =====================================================================
   1. INJECTED SUMMARY  (Arrivee -> Depart + live "N nuits")
   ===================================================================== */
body.search-page .pbf-date-summary{
  display:flex !important; align-items:stretch !important; gap:8px !important;
  width:100% !important; margin:0 0 12px !important; padding:0 !important;
  box-sizing:border-box !important;
}
body.search-page .pbf-date-summary .pbf-ds-cell{
  flex:1 1 0 !important; min-width:0 !important;
  display:flex !important; flex-direction:column !important; gap:2px !important;
  padding:10px 12px !important; background:#fff !important;
  border:1.5px solid var(--pbd-bdr) !important; border-radius:12px !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}
body.search-page .pbf-date-summary.pbf-pick-in  .pbf-ds-in,
body.search-page .pbf-date-summary.pbf-pick-out .pbf-ds-out{
  border-color:var(--pbd-orange) !important;
  box-shadow:0 0 0 3px rgba(254,94,0,.12) !important;
}
body.search-page .pbf-date-summary .pbf-ds-label{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.04em !important;
  text-transform:uppercase !important; color:var(--pbd-dim) !important; line-height:1.1 !important;
}
body.search-page .pbf-date-summary .pbf-ds-value{
  font-size:16px !important; font-weight:800 !important; letter-spacing:-.01em !important;
  color:var(--pbd-ink) !important; line-height:1.2 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
body.search-page .pbf-date-summary .pbf-ds-value.pbf-empty{
  color:#AEB6BF !important; font-weight:600 !important;
}
body.search-page .pbf-date-summary .pbf-ds-arrow{
  flex:0 0 auto !important; align-self:center !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--pbd-dim) !important;
}
body.search-page .pbf-date-summary .pbf-ds-arrow svg{ display:block !important; }
body.search-page .pbf-date-nights{
  flex:0 0 auto !important; align-self:center !important;
  margin-left:2px !important; padding:6px 10px !important;
  background:var(--pbd-tint) !important; color:var(--pbd-orange) !important;
  border-radius:999px !important; font-size:13px !important; font-weight:800 !important;
  line-height:1 !important; white-space:nowrap !important;
}

/* =====================================================================
   2. INJECTED QUICK-PICK CHIPS
   ===================================================================== */
body.search-page .pbf-date-chips{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  width:100% !important; margin:0 0 12px !important; padding:0 !important;
  box-sizing:border-box !important;
}
body.search-page .pbf-chip{
  appearance:none !important; -webkit-appearance:none !important; flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-height:40px !important; padding:0 14px !important;
  border:1.5px solid var(--pbd-bdr) !important; border-radius:22px !important;
  background:#fff !important; color:var(--pbd-ink) !important;
  font-family:inherit !important; font-size:14px !important; font-weight:600 !important;
  line-height:1 !important; white-space:nowrap !important; cursor:pointer !important;
  box-shadow:0 1px 2px rgba(11,29,44,.04) !important;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .08s ease !important;
}
body.search-page .pbf-chip:hover{
  border-color:var(--pbd-orange) !important; background:var(--pbd-tint) !important; color:var(--pbd-orange) !important;
}
body.search-page .pbf-chip:active{ transform:scale(.96) !important; }
body.search-page .pbf-chip:focus-visible{ outline:2px solid rgba(254,94,0,.45) !important; outline-offset:2px !important; }
body.search-page .pbf-date-chips .pbf-chip[data-pbf-pick="flex"]{
  margin-left:auto !important; color:var(--pbd-dim) !important; border-style:dashed !important;
}
body.search-page .pbf-date-chips .pbf-chip[data-pbf-pick="flex"]:hover{
  color:var(--pbd-ink) !important; border-color:var(--pbd-ink) !important;
  background:#F4F6F8 !important; border-style:solid !important;
}

/* =====================================================================
   3. RANGE SKIN — shared cell look on BOTH instances via .pbf-date-host.
   NOTE: no fixed WIDTH (cells stay table-auto 14.2857%); touch target = height.
   ===================================================================== */
body.search-page .pbf-date-host td.available{
  border-radius:50% !important; color:var(--pbd-ink) !important;
  transition:background .12s ease, color .12s ease !important;
}
body.search-page .pbf-date-host td.available:hover{
  background:var(--pbd-tint) !important; color:var(--pbd-ink) !important;
}
/* soft tinted in-range band */
body.search-page .pbf-date-host td.in-range{
  background:var(--pbd-band) !important; color:var(--pbd-ink) !important; border-radius:0 !important;
}
/* filled start / end pills */
body.search-page .pbf-date-host td.active,
body.search-page .pbf-date-host td.active:hover,
body.search-page .pbf-date-host td.start-date,
body.search-page .pbf-date-host td.end-date{
  background:var(--pbd-sel) !important; color:#fff !important; font-weight:800 !important;
}
body.search-page .pbf-date-host td.in-range.start-date{ border-radius:50% 0 0 50% !important; }
body.search-page .pbf-date-host td.in-range.end-date{ border-radius:0 50% 50% 0 !important; }
body.search-page .pbf-date-host td.active.start-date{ border-radius:50% 0 0 50% !important; }
body.search-page .pbf-date-host td.active.end-date{ border-radius:0 50% 50% 0 !important; }
/* today ring (only when not selected) */
body.search-page .pbf-date-host td.today:not(.active):not(.in-range){
  box-shadow:inset 0 0 0 2px var(--pbd-orange) !important; font-weight:800 !important; border-radius:50% !important;
}
body.search-page .pbf-date-host td.off{ color:#C7CDD4 !important; }
body.search-page .pbf-date-host td.disabled,
body.search-page .pbf-date-host td.off.disabled{ color:#D6DBE0 !important; text-decoration:line-through !important; }
/* month header + nav arrows: clean + consistent */
body.search-page .pbf-date-host .month{
  font-weight:800 !important; color:var(--pbd-ink) !important; font-size:15px !important; text-transform:capitalize !important;
}
body.search-page .pbf-date-host th.prev,
body.search-page .pbf-date-host th.next{
  color:var(--pbd-ink) !important; border-radius:50% !important;
}
body.search-page .pbf-date-host th.prev:hover,
body.search-page .pbf-date-host th.next:hover{ background:var(--pbd-tint) !important; }
body.search-page .pbf-date-host th.prev span,
body.search-page .pbf-date-host th.next span{ border-color:var(--pbd-ink) !important; }

/* =====================================================================
   A. MOBILE  (base, <768px) — inline sheet picker
   ===================================================================== */
/* stack the scroll body so injected nodes sit above the calendar */
body.search-page .date-mobile-info{
  display:flex !important; flex-direction:column !important;
}
body.search-page .pbf-host-sheet{ padding-top:2px !important; }
body.search-page .pbf-host-sheet .pbf-date-summary{ margin-bottom:12px !important; }

/* BIG touch target via HEIGHT (width stays auto 14.2857% -> no h-scroll) */
body.search-page .date-mobile-info .daterangepicker td,
body.search-page .date-mobile-info .daterangepicker th{
  height:44px !important; min-width:0 !important; width:14.2857% !important;
  font-size:15px !important; padding:0 !important;
}
/* keep the two month tables full width + stacked (R1 already de-floated) */
body.search-page .date-mobile-info .daterangepicker .drp-calendar,
body.search-page .date-mobile-info .daterangepicker table.table-condensed{
  width:100% !important; max-width:none !important;
}
/* safety: never allow the inline picker to push horizontal scroll */
body.search-page .date-mobile-info{ overflow-x:hidden !important; }
body.search-page .date-mobile-info .daterangepicker{ max-width:100% !important; }

/* =====================================================================
   B. TABLET  (768-991px) — same sheet picker, slightly tighter cells
   ===================================================================== */
@media (min-width:768px) and (max-width:991px){
  body.search-page .date-mobile-info .daterangepicker td,
  body.search-page .date-mobile-info .daterangepicker th{
    height:42px !important; font-size:15px !important;
  }
  body.search-page .pbf-date-summary{ max-width:520px !important; margin-left:auto !important; margin-right:auto !important; }
  body.search-page .pbf-date-chips{ max-width:520px !important; margin-left:auto !important; margin-right:auto !important; }
}

/* =====================================================================
   C. DESKTOP  (>=992px) — anchored .dbdate picker LEFT INTACT.
   We only ADD the summary/chips inside the dropdown and skin its cells.
   We do NOT set a min-width that could overflow the viewport; the picker
   keeps its native size and anchor (R1/search.js untouched).
   ===================================================================== */
@media (min-width:992px){
  body.search-page .pbf-host-pill .pbf-date-summary{ margin:2px 0 10px !important; }
  body.search-page .pbf-host-pill .pbf-date-chips{ margin:0 0 10px !important; }
  body.search-page .pbf-host-pill .pbf-chip{ min-height:34px !important; font-size:13px !important; padding:0 12px !important; }
  body.search-page .pbf-host-pill .pbf-ds-value{ font-size:15px !important; }

  /* desktop cells: comfortable, NOT giant (anchored dropdown). Width stays auto. */
  body.search-page .pbf-host-pill td.available,
  body.search-page .pbf-host-pill th{
    height:38px !important; min-width:38px !important;
  }
  /* summary/chips shrink to the picker's own width (never widen the dropdown) */
  body.search-page .pbf-host-pill .pbf-date-summary,
  body.search-page .pbf-host-pill .pbf-date-chips{
    max-width:100% !important; box-sizing:border-box !important;
  }
}

/* =====================================================================
   D. NARROW PHONES (<=360px) — extra guard against any horizontal scroll
   ===================================================================== */
@media (max-width:360px){
  body.search-page .date-mobile-info .daterangepicker td,
  body.search-page .date-mobile-info .daterangepicker th{
    height:42px !important; font-size:14px !important;
  }
  body.search-page .pbf-chip{ font-size:13px !important; padding:0 12px !important; }
  body.search-page .pbf-date-summary .pbf-ds-value{ font-size:15px !important; }
  body.search-page .pbf-date-nights{ font-size:12px !important; padding:5px 8px !important; }
}
/* PB-DATE-R3-END */

/* PB-R4-START */
/* ============================================================================
   PALMABOOK /s  —  ROUND 4  FINAL MERGED REFINEMENTS  (ADDITIVE, append LAST)
   ----------------------------------------------------------------------------
   Merges 5 verified-safe dimensions into one cohesive block:
     A. Listing result cards (hover ease/lift, title clamp, meta, price, dots)
     B. Typography & color  (4 WCAG-AA contrast fixes, token-consistent)
     C. Micro-interactions  (loading skeleton/shimmer, image fade-in, :active)
     D. Accessibility       (focus-visible rings, >=40px tap targets, reduced-motion)
     E. Header & search bar (search-field affordance, pills/globe focus, scroll-elevation)
   RULES OBSERVED: every selector leads with body.search-page + !important; appended
   AFTER the blade inline <style> and the live PB-DATE-R3 block so it wins the cascade
   with no rewrite. Mobile-first. NO filter open/close drivers touched
   (#pbf-scrim, body.pbf-open, .active visibility/opacity/transform, .pbf-date-*,
   guest/date-mobile-drop, .more-filter sheets), NO sticky-map driver, NO Angular
   scope, NO Popper/widget internals. Rollback = delete this block.
   Focus-ring convention unified on the page's existing orange rgba(254,94,0,.5).
   ============================================================================ */
/* PB-R4-FINAL-START */

/* ====================  A.  LISTING RESULT CARDS  ========================== */

/* A1+A2 — HOVER: ease the photo zoom (today it SNAPS — no transition on the
   img) and deepen the card lift. Gated to hover-capable pointers so touch
   devices never get a stuck :hover state. Reconciles with the blade's
   :hover scale(1.03) by overriding it with an eased richer scale. */
@media (hover:hover) and (pointer:fine){
  body.search-page .search-list .search-img{ overflow:hidden !important; }
  body.search-page .search-list .search-img img,
  body.search-page .search-list .search-img .s-carousel__slide img{
    transition:transform .5s cubic-bezier(.2,.6,.2,1) !important;
    will-change:transform !important;
  }
  body.search-page .search-list > div:hover .search-img img,
  body.search-page .search-list > div:hover .search-img .s-carousel__slide img{
    transform:scale(1.045) !important;
  }
  body.search-page .search-list > div{
    transition:box-shadow .25s cubic-bezier(.4,0,.2,1),
               border-color .25s ease,
               transform .25s cubic-bezier(.4,0,.2,1) !important;
  }
  body.search-page .search-list > div:hover{
    transform:translateY(-3px) !important;
    border-color:#D2D7DD !important;
    box-shadow:0 1px 2px rgba(11,29,44,.06),
               0 14px 30px rgba(11,29,44,.13) !important;
  }
}

/* A3 — NAME: clamp to 2 lines so result rows stay even (name is
   white-space:normal with no clamp today). Applies at all widths. */
body.search-page .search-list .search-info > a.text-truncate{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:normal !important;
  letter-spacing:-.01em !important;
}

/* A4 — META: give the middot RateHawk breathing room. Targets only the
   separator spans of the meta h4 (not the cls_covid h4, which has one span). */
body.search-page .search-list .search-info > h4{
  letter-spacing:.005em !important;
}
body.search-page .search-list .search-info > h4 > span{
  margin:0 1px !important;
}
body.search-page .search-list .search-info > h4 > span:nth-child(2){
  margin:0 5px !important;
  color:#9AA6B0 !important;
}

/* A5 — PRICE: baseline-align the big figure with the "/nuit" suffix (an
   anonymous text node) and tighten the numeral. Same DOM, flex-wrap guards
   overflow. */
body.search-page .search-list .search-info > .search-price{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  gap:3px !important;
  line-height:1.15 !important;
}
body.search-page .search-list .search-info > .search-price span{
  letter-spacing:-.02em !important;
}

/* A6 — CAROUSEL DOTS: self-contained styling (had none in the patch/blade
   layer). Active dot — toggled by existing Angular ng-class — widens to a
   pill. Scoped to .search-list so the map info-window carousel is untouched. */
body.search-page .search-list .s-carousel__dots{
  position:absolute !important;
  bottom:9px !important; left:0 !important; right:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:5px !important;
  z-index:3 !important;
  pointer-events:none !important;
}
body.search-page .search-list .s-carousel__dots .s-carousel__dot{
  display:block !important;
  width:6px !important; height:6px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.6) !important;
  box-shadow:0 0 2px rgba(0,0,0,.25) !important;
  transition:width .25s ease, background-color .25s ease !important;
}
body.search-page .search-list .s-carousel__dots .s-carousel__dot.active{
  width:16px !important;
  background:#fff !important;
}

/* A6b — CAROUSEL ARROWS: lift contrast + a soft shadow (self-contained;
   preserves the blade's translateY(-50%) vertical centering). */
@media (hover:hover) and (pointer:fine){
  body.search-page .search-list .s-carousel__btn{
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 2px 6px rgba(11,29,44,.18) !important;
    color:#0B1D2C !important;
  }
}

/* ====================  B.  TYPOGRAPHY & COLOR (WCAG-AA)  =================== */
/* All four fixes reuse the page's OWN values (#6B7785 = the desktop-card meta
   grey, 4.56:1; --c-blue-dk #0c6a96, 5.97:1) so the palette stays consistent.
   Brand orange / price / heart / star / CTA gradients are NOT touched.
   Color-only overrides — no layout/position/opacity/transform, so zero
   interaction with any locked driver. NOT applied under prefers-contrast:high,
   where the theme already ships a stronger #555/#333 we want to keep. */
@media not all and (prefers-contrast:high){

  /* B1 — FAINT COPY  #94abb8 (2.39:1, FAILS) -> #6B7785 (4.56:1).
     The zero-results hint/trust/disclosure block is the worst readability
     issue on the page today. */
  body.search-page #no_results .nr-hint,
  body.search-page #no_results .nr-trust,
  body.search-page #no_results .nr-disclosure,
  body.search-page #no_results .nr-divider{ color:#6B7785 !important; }

  /* B2 — COMPARE-BANNER DISCLOSURE on dark  .35 white (3.18:1) -> .62 (7.2:1).
     The .55 sub-headline already passes and is left alone. */
  body.search-page .compare-banner__disclosure{ color:rgba(255,255,255,.62) !important; }

  /* B3 — DATE/GUEST-DROP LINK TEXT  --c-blue #1792cd (3.48:1) -> #0c6a96
     (5.97:1). These are anchor TEXT ("Annuler"/"Effacer") only, NOT the sheet
     open/close drivers. Underline on hover keeps the link affordance. */
  body.search-page .guest-mobile-drop .green-link,
  body.search-page .guest-mobile-drop .cancel-link,
  body.search-page .date-mobile-drop .green-link,
  body.search-page .date-mobile-drop .cancel-link{ color:#0c6a96 !important; }
  body.search-page .guest-mobile-drop .green-link:hover,
  body.search-page .guest-mobile-drop .cancel-link:hover,
  body.search-page .date-mobile-drop .green-link:hover,
  body.search-page .date-mobile-drop .cancel-link:hover{
    color:#0a5a80 !important; text-decoration:underline !important;
  }

  /* B4 — REVIEWS-COUNT META  --c-dim #5a7d91 (4.40:1, a hair under) -> #6B7785.
     ONLY the count text; the orange star icon (color set at the .icon level)
     is untouched by recoloring this ancestor span. */
  body.search-page .search-ratings a span:not([ng-bind-html]){ color:#6B7785 !important; }
}

/* ====================  C.  MICRO-INTERACTIONS & STATES  =================== */

/* C1 — RESULTS LOADING SKELETON / SHIMMER.
   search.js adds `.loading` to .search-wrap on EVERY fetch (first load,
   pagination, every filter re-query) and removes it on response (JS 511/635
   add, 672/701 remove). Nothing styled it -> the list froze with no feedback
   then snap-replaced. We dim the stale cards and lay a shimmer veil over the
   column. .search-map is a SIBLING of .search-content-filters (not a child of
   .search-wrap), so position:relative here cannot trap the sticky map.
   pointer-events guarded so it NEVER blocks a click once .loading is gone. */
body.search-page .search-wrap.loading{ position:relative !important; }
body.search-page .search-wrap.loading > .search-list{
  opacity:.45 !important;
  filter:saturate(.6) !important;
  transition:opacity .2s ease !important;
  pointer-events:none !important;
}
body.search-page .search-wrap.loading::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  border-radius:14px !important;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 70%) !important;
  background-size:220% 100% !important;
  animation:pbShimmer 1.15s ease-in-out infinite !important;
}
@keyframes pbShimmer{
  0%{ background-position:140% 0; }
  100%{ background-position:-40% 0; }
}

/* C2 — IMAGE FADE-IN. Default = fully visible (regression-safe: if the JS
   never runs, the image shows). The optional JS adds .pb-img-pending (hide)
   then .pb-img-in (fade) on load; cached imgs go straight to .pb-img-in. */
body.search-page .search-list .search-img img{ opacity:1 !important; }
/* FADE-IN DISABLED: a load-before-listener race left images stuck at opacity:0 (blank cards).
   Images are now ALWAYS visible; pb-img-pending no longer hides them. */
body.search-page .search-list .search-img img.pb-img-pending{ opacity:1 !important; }
body.search-page .search-list .search-img img.pb-img-in{ opacity:1 !important; }

/* C3 — :active PRESS FEEDBACK on the card (tiny, returns to hover on release;
   carousel <a> slides still navigate, button stopPropagation unaffected). */
@media (hover:hover) and (pointer:fine){
  body.search-page .search-list > div:active{
    transform:translateY(0) scale(.997) !important;
  }
}

/* ====================  D.  ACCESSIBILITY  ================================= */

/* D1 — VISIBLE KEYBOARD FOCUS (WCAG 2.4.7) via :focus-visible ONLY, so the
   mouse/touch path sees NO change. Unified on the page's orange ring
   convention (already shipped on .pbf-chip). Covers the real tab targets:
   filter pills, card name/ratings links, carousel arrows, wishlist heart,
   value steppers, CTAs, pagination. */
body.search-page .search_filter .nav-item .dropdown-toggle:focus-visible,
body.search-page .search_filter .nav-item > button:focus-visible,
body.search-page .search_filter .nav-item > .dbdate:focus-visible{
  outline:2px solid rgba(254,94,0,.5) !important;
  outline-offset:2px !important;
  border-color:var(--c-orange,#FE5E00) !important;
}
body.search-page .search-list .search-info > a:focus-visible,
body.search-page .search-list .search-ratings a:focus-visible{
  outline:2px solid rgba(254,94,0,.5) !important;
  outline-offset:2px !important;
  border-radius:4px !important;
}
body.search-page .search-list .s-carousel__btn:focus-visible{
  outline:2px solid rgba(254,94,0,.65) !important;
  outline-offset:1px !important;
  opacity:1 !important;            /* reveal arrow on keyboard focus, not just hover */
}
body.search-page .search-wishlist label:focus-within,
body.search-page .search-wishlist input:focus-visible + label{
  outline:2px solid rgba(254,94,0,.55) !important;
  outline-offset:2px !important;
}
body.search-page .value-changer .value-button:focus-visible,
body.search-page .value-changer button:focus-visible{
  outline:2px solid rgba(254,94,0,.5) !important;
  outline-offset:2px !important;
}
body.search-page .btn-compare-booking:focus-visible,
body.search-page a.apply-filter:focus-visible,
body.search-page a.cancel-filter:focus-visible,
body.search-page .results-pagination a:focus-visible,
body.search-page .pagination-container a:focus-visible{
  outline:2px solid rgba(254,94,0,.5) !important;
  outline-offset:2px !important;
}
/* dark Comparer CTA sits on a navy banner -> light ring for contrast */
body.search-page .btn-compare-booking--banner:focus-visible,
body.search-page .compare-banner .btn-compare-booking:focus-visible{
  outline:2px solid #fff !important;
  outline-offset:2px !important;
}

/* D2 — TAP TARGETS >=40px (WCAG 2.5.8) via invisible ::after overlays. Visual
   size unchanged; ::after is absolute + pointer-events:none so it adds NO
   layout and clicks fall through to the real control. */
body.search-page .search-wishlist label{ position:relative !important; }
body.search-page .search-wishlist label::after{
  content:"" !important; position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:44px !important; height:44px !important;
  pointer-events:none !important;
}
body.search-page .search-list .s-carousel__btn{ position:relative !important; }
body.search-page .search-list .s-carousel__btn::after{
  content:"" !important; position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:40px !important; height:40px !important;
  pointer-events:none !important;
}
body.search-page .value-changer .value-button{ position:relative !important; }
body.search-page .value-changer .value-button::after{
  content:"" !important; position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:40px !important; height:40px !important;
  pointer-events:none !important;
}

/* D3 — REDUCED MOTION (WCAG 2.3.3): neutralize ONLY decorative animation
   (card lift, photo zoom, dot/arrow transitions, shimmer, image fade). This
   is a NEGATIVE list — it never names the filter open/close drivers, so sheet
   transitions are unaffected. */
@media (prefers-reduced-motion:reduce){
  body.search-page .search-list > div,
  body.search-page .search-list > div:hover,
  body.search-page .search-list .search-img img,
  body.search-page .search-list .search-img .s-carousel__slide img,
  body.search-page .search-list > div:hover .search-img img,
  body.search-page .search-list .s-carousel__dots .s-carousel__dot,
  body.search-page .search-list .search-img img.pb-img-in{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
  body.search-page .search-wrap.loading::after{ animation:none !important; }
}

/* ====================  E.  EMPTY / LOADING / PAGINATION  ================== */

/* E1 — PAGINATION: replace the 2015 coral #ff5a5f pager (only styled by the
   477KB common.css) with the on-brand 2026 look. Restyles ONLY the static
   <ul class="pagination"> the Angular directive renders; markup/ng-click/
   ng-show untouched. body.search-page-scoped so the global pager elsewhere
   is unaffected. */
body.search-page .results-pagination{ margin:8px 8px 4px !important; }
body.search-page .pagination-container{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
}
body.search-page .results-count p{
  font-family:var(--f,inherit) !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#6B7785 !important;
  margin:0 !important;
  text-align:center !important;
  letter-spacing:-.01em !important;
}
body.search-page ul.pagination{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
  border-radius:0 !important;
}
body.search-page ul.pagination li{ margin:0 !important; }
body.search-page ul.pagination li a,
body.search-page ul.pagination li span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:38px !important;
  height:38px !important;
  padding:0 12px !important;
  border:1px solid #E6E9ED !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#0B1D2C !important;
  font-family:var(--f,inherit) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(11,29,44,.04) !important;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease !important;
}
body.search-page ul.pagination li a:hover{
  border-color:var(--c-orange,#FE5E00) !important;
  color:var(--c-orange,#FE5E00) !important;
  transform:translateY(-1px) !important;
}
body.search-page ul.pagination li a:active{ transform:translateY(0) !important; }
body.search-page ul.pagination li.active a,
body.search-page ul.pagination li.active span{
  background:#0B1D2C !important;
  border-color:#0B1D2C !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(11,29,44,.22) !important;
  cursor:default !important;
}
body.search-page ul.pagination li.active a:hover{
  transform:none !important; color:#fff !important;
}
body.search-page ul.pagination li.hideout{ display:none !important; }
@media (prefers-reduced-motion:reduce){
  body.search-page ul.pagination li a{ transition:none !important; transform:none !important; }
}
@media (max-width:679px){
  body.search-page ul.pagination li a,
  body.search-page ul.pagination li span{ min-width:36px !important; height:40px !important; }
}

/* E2 — ENTRANCE polish for the zero-results block (honors reduced-motion). */
@keyframes pbNrIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
body.search-page #no_results{ animation:pbNrIn .4s ease both !important; }
@media (prefers-reduced-motion:reduce){
  body.search-page #no_results{ animation:none !important; }
}

/* ====================  F.  HEADER & SEARCH BAR  ========================== */
/* Cosmetics only (hover/focus/shadow); brand tokens carry hex fallbacks so
   they render even if a var is missing. No layout/position on load-bearing
   nodes except the globe hit-target (F3), which is flex-centered in the
   existing nav row. */

/* F1 — "Où allez-vous?" SEARCH FIELD affordance + focus ring (NONE existed in
   common.css/theme/patches). Respects the 32px pill radius the browser
   default outline clipped. */
body.search-page header .search-bar-wrapper .search-form .search-bar .location{
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
  cursor:text !important;
}
body.search-page header .search-bar-wrapper .search-form .search-bar:hover .location,
body.search-page header .search-bar-wrapper .search-form .search-bar .location:hover{
  border-color:var(--c-orange,#fe5e00) !important;
  box-shadow:0 2px 10px rgba(254,94,0,.14) !important;
}
body.search-page header .search-bar-wrapper .search-form .search-bar .location:focus,
body.search-page header .search-bar-wrapper .search-form .search-bar .location:focus-visible{
  outline:none !important;
  border-color:var(--c-orange,#fe5e00) !important;
  box-shadow:0 0 0 3px rgba(254,94,0,.22), 0 2px 10px rgba(254,94,0,.16) !important;
}
body.search-page header .search-bar-wrapper .search-form .search-bar:hover > .icon,
body.search-page header .search-bar-wrapper .search-form .search-bar:focus-within > .icon{
  color:var(--c-orange,#fe5e00) !important;
}
body.search-page header .search-bar-wrapper .search-form .search-bar .search-modal-trigger:active,
body.search-page header .search-bar-wrapper .search-form .search-bar .search-modal-trigger:focus-visible{
  outline:none !important;
  border-color:var(--c-orange,#fe5e00) !important;
  box-shadow:0 0 0 3px rgba(254,94,0,.22) !important;
}

/* F3 — LANGUAGE/CURRENCY globe: give the bare link a real 40x40 hit-target +
   hover, balancing the bordered account pill. (Only header rule that sets a
   box — flex-centered, so no baseline shift.) */
body.search-page header .navbar-nav .nav-item.web_lang > a.nav-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  color:var(--c-h,#0b1d2c) !important;
  transition:background-color .18s ease, color .18s ease, transform .18s ease !important;
}
body.search-page header .navbar-nav .nav-item.web_lang > a.nav-link:hover{
  background-color:var(--c-bg2,#f7f7f7) !important;
  color:var(--c-orange,#fe5e00) !important;
}
body.search-page header .navbar-nav .nav-item.web_lang > a.nav-link:focus-visible{
  outline:2px solid rgba(254,94,0,.5) !important;
  outline-offset:2px !important;
}

/* F4 — STICKY HEADER scroll-elevation. Class toggled by the JS below; z-index
   left untouched. A faint resting hairline + a soft shadow once scrolled. */
body.search-page header.pb-header,
body.search-page header.header{
  transition:box-shadow .2s ease, border-color .2s ease !important;
}
body.search-page.pb-header-scrolled header.pb-header,
body.search-page.pb-header-scrolled header.header{
  box-shadow:0 2px 12px rgba(11,29,44,.10) !important;
}

/* PB-R4-FINAL-END */
/* PB-R4-END */


/* PB-MF-FIX-START */
/* =====================================================================
   PBF-MF-FIX 2026-06-14  —  "Plus de filtres" DESKTOP docked-footer card
   ---------------------------------------------------------------------
   Pairs with pbf-mf-fix.js, which on desktop-open moves the panel footer
   .search-content-filters > .filter-btn  INTO  .more-filter (last child),
   wraps the rest of the panel in .pbf-mf-scroll, and tags .more-filter
   with .pbf-mf-card. This turns the panel into a fixed floating dropdown
   card whose body scrolls and whose footer (Annuler / "voir les maisons")
   is ALWAYS visible at the bottom.

   Gated @media(min-width:992px) to align EXACTLY with the live mobile-sheet
   boundary (max-width:991px) — no 992-1024 dead zone. Mobile/tablet sheet
   and the Bootstrap dropdown footers are NOT touched (no selector below
   matches them). Every selector leads with body.search-page + !important so
   it beats the blade inline <style>, the existing absolute rule, and the
   inline px height search.js writes on .more-filter.
   --pb-stick (header+bar bottom offset) is maintained on desktop by the blade
   pbStick() IIFE; fallback 150px covers the brief pre-JS paint.
   ===================================================================== */
@media (min-width:768px){

  /* ---- The floating CARD: fixed, anchored under the sticky filter bar.
     Fixed + viewport-space max-height => the docked footer can NEVER be pushed
     off-screen, on any viewport height, scrolled or not. ---- */
  body.search-page .more-filter.pbf-mf-card{
    position:fixed !important;
    top:var(--pb-stick,150px) !important;
    right:max(22px, calc((100vw - 1320px)/2 + 22px)) !important;
    left:auto !important;
    bottom:auto !important;
    width:min(560px, calc(100vw - 44px)) !important;
    max-width:560px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100vh - var(--pb-stick,150px) - 24px) !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    background:#fff !important;
    border:1px solid #E6E9ED !important;
    border-radius:16px !important;
    box-shadow:0 18px 60px rgba(8,28,46,.22) !important;
    overflow:hidden !important;            /* card clips; inner body scrolls */
    z-index:1200 !important;               /* above sticky bar (1090), below header (1300) */
    padding:0 !important;
    /* neutralise the mobile slide-in transition/transform if it cascades here */
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    -webkit-transform:none !important;
    pointer-events:auto !important;
    transition:none !important;
  }

  /* ---- Scrollable BODY: holds everything except the docked footer (and the
     hidden injected head). flex:1 1 auto + min-height:0 + overflow-y:auto is
     the canonical "scroll inside a capped flex column" recipe. ---- */
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    padding:20px 22px 8px !important;
    margin:0 !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > *{
    margin:0 0 20px !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > *:last-child{
    margin-bottom:0 !important;
  }

  /* ---- DOCKED FOOTER: the relocated .filter-btn, now a direct child of the
     card. flex:0 0 auto keeps it OUT of the scroll region => always visible at
     the bottom of the flex column, never off-screen, never floating. ---- */
  body.search-page .more-filter.pbf-mf-card > .filter-btn{
    position:relative !important;
    flex:0 0 auto !important;
    top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; min-height:0 !important;
    margin:0 !important;
    padding:14px 22px calc(14px + env(safe-area-inset-bottom,0)) !important;
    background:#fff !important;
    border-top:1px solid #E6E9ED !important;
    border-radius:0 0 16px 16px !important;
    box-shadow:0 -6px 18px rgba(8,28,46,.06) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    z-index:2 !important;
  }

  /* Annuler (left) — force layout only; keep the site's link look. */
  body.search-page .more-filter.pbf-mf-card > .filter-btn .cancel-filter{
    order:-1 !important;
    flex:0 0 auto !important;
    margin:0 !important;
    font-size:15px !important;
    font-weight:600 !important;
    color:#6B7785 !important;
    text-decoration:underline !important;
    white-space:nowrap !important;
    cursor:pointer !important;
  }
  /* "voir les maisons" — DO NOT recolor: the existing desktop teal/cyan pill
     rule (a.apply-filter.btn-secondary) keeps winning so it matches every other
     filter's apply button. Force layout only. */
  body.search-page .more-filter.pbf-mf-card > .filter-btn .apply-filter{
    flex:0 0 auto !important;
    margin:0 !important;
    white-space:nowrap !important;
  }

  /* Keep the (display:none on desktop) injected close header out of the card
     so it never reserves a row. */
  body.search-page .more-filter.pbf-mf-card .pbf-mf-head{ display:none !important; }

  /* Collapse the zero-size placeholder marking the footer's original slot so it
     never reserves the old ~2450px ghost row while the footer is relocated. */
  body.search-page .search-content-filters > .pbf-mf-foot-slot{
    display:none !important;
  }
}

/* PB-MF-FIX-END */


/* PB-MF-BEAUTY-END */



/* ---- FIX 2026-06-15: PRESERVE the app's "Voir tout / Fermer" progressive
   disclosure. The .col-md-6 {display:flex} rules above would otherwise force
   the extra (>4) amenity/property items visible even when .all-list is NOT
   .active, defeating the native collapse. Re-hide them until the app adds
   .active (verified: collapsed shows 4 items @33px, expanded shows all @595px;
   toggle .show-all-toggle stays visible since it is .col-12, not .col-md-6). */
body.search-page .more-filter .filter-list .all-list:not(.active) .col-md-6,
body.search-page .more-filter.pbf-mf-card .filter-list .all-list:not(.active) .col-md-6{ display:none !important; }

/* PB-MF-BEAUTY-END */

/* PB-DATE-R5-START */
/* =====================================================================
   PALMABOOK /s — DATE PICKER · ROUND 5  (DESKTOP-ONLY) [ADDITIVE]
   ---------------------------------------------------------------------
   APPEND LAST in patches-2026.css, AFTER _filter_ui_final + _filter_r2 +
   _dates_r3 + _r4 (verified live bundle order). 100% additive. Touches the
   DESKTOP (>=992px) anchored Dates dropdown ONLY.

   ROOT CAUSE — verified against the LIVE asset /js/daterangepicker.js:
     - palmabook.com runs bootstrap-daterangepicker **v2.1.25**. The two
       months render as `.calendar.left` / `.calendar.right`, each holding a
       `.calendar-table`. There is NO `.drp-calendar` element on the live site
       (that is a v3 class). Buttons live in `.ranges > .range_inputs` as
       `.applyBtn` / `.cancelBtn` / `.resetBtn`.
     - common.css ships the matching v2 skin:
         .daterangepicker.show-calendar .calendar{display:block}  <- BLOCKS them
         .daterangepicker.show-calendar{width:590px}              <- the ~590px box
       => in the anchored desktop dropdown the two months render display:block
          inside ~590px and STACK VERTICALLY (the live bug).
     - Every earlier "side-by-side" attempt targeted `.drp-calendar`, so it
       matched NOTHING on this v2 picker — which is why the months kept
       stacking AND why the R3 cell skin never reached the desktop calendar.

   THE FIX (robust, library-agnostic, cannot collapse):
     1) widen the anchored dropdown to ~660px (beats common.css 590px);
     2) force the two month panels SIDE BY SIDE with inline-block + fixed
        50% width + vertical-align:top, overriding common.css display:block
        and any float/clear/inline Popper sizing;
     3) keep the buttons row (.ranges/.range_inputs => Apply/Clear) as a
        full-width block BELOW the calendars so commit/clear are untouched.
   Covers BOTH the live v2 `.calendar.*` AND a future v3 `.drp-calendar`.

   SCOPE GUARANTEE: everything is inside @media(min-width:992px) and led by
   body.search-page .pbf-host-pill — the class the R3 JS adds ONLY to the
   DESKTOP anchored picker's .daterangepicker root. The MOBILE sheet gets
   .pbf-host-sheet, so NOTHING here reaches the <768 full-screen sheet
   (.date-mobile-info) NOR the 768-991 tablet card. We never re-declare
   position/anchor, open/close drivers, or button behavior — width + the
   inline-block month layout are the only structural changes.
   ===================================================================== */
@media (min-width:992px){

  /* --- 1. WIDEN the anchored dropdown so both months fit, no scroll.
     The R3 host IS the .daterangepicker root. width:auto + min/max lets it
     grow to ~660px past common.css show-calendar:590px, capped to the
     viewport so it can never overflow on a small laptop. Native anchor
     (top/left from the library) is preserved — only WIDTH changes. ------- */
  body.search-page .daterangepicker.pbf-host-pill,
  body.search-page .pbf-host-pill.daterangepicker,
  body.search-page .pbf-host-pill{
    width:auto !important;
    min-width:640px !important;
    max-width:min(680px, calc(100vw - 40px)) !important;
    box-sizing:border-box !important;
    padding:16px 16px 8px !important;
    white-space:normal !important;   /* let the two inline-block months sit on one line, not nowrap-clipped */
  }
  /* the library caret can mis-point once we widen the box — hide it */
  body.search-page .daterangepicker.pbf-host-pill:before,
  body.search-page .daterangepicker.pbf-host-pill:after{ display:none !important; }

  /* --- 2. TWO MONTHS SIDE BY SIDE (cannot collapse to vertical).
     Covers BOTH live v2 `.calendar.left/.right` AND future v3
     `.drp-calendar`. inline-block + 50% width + top alignment overrides
     common.css `display:block` and neutralises float/clear, so the right
     month sits BESIDE the left, never under it — independent of inline
     styles / Popper. ---------------------------------------------------- */
  body.search-page .pbf-host-pill .calendar,
  body.search-page .pbf-host-pill .calendar.left,
  body.search-page .pbf-host-pill .calendar.right,
  body.search-page .pbf-host-pill .drp-calendar,
  body.search-page .pbf-host-pill .drp-calendar.left,
  body.search-page .pbf-host-pill .drp-calendar.right{
    display:inline-block !important;
    vertical-align:top !important;
    float:none !important;
    clear:none !important;
    width:50% !important;
    max-width:50% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 6px !important;
    box-sizing:border-box !important;
  }
  /* comfortable gutter between the two months (kept inside the 50/50) */
  body.search-page .pbf-host-pill .calendar.left,
  body.search-page .pbf-host-pill .drp-calendar.left{ padding-right:10px !important; }
  body.search-page .pbf-host-pill .calendar.right,
  body.search-page .pbf-host-pill .drp-calendar.right{ padding-left:10px !important; }
  /* subtle seam between months */
  body.search-page .pbf-host-pill .calendar.right,
  body.search-page .pbf-host-pill .drp-calendar.right{
    border-left:1px solid var(--pbd-bdr2,#EEF1F4) !important;
  }

  /* the month grid fills its half cleanly; kill v2's inner borders/cap */
  body.search-page .pbf-host-pill .calendar-table,
  body.search-page .pbf-host-pill .drp-calendar .calendar-table{
    padding:0 !important; border:0 !important; background:transparent !important;
    width:100% !important; max-width:100% !important;
  }
  body.search-page .pbf-host-pill .calendar-table table,
  body.search-page .pbf-host-pill table.table-condensed{
    width:100% !important; max-width:100% !important; margin:0 !important;
    table-layout:fixed !important;   /* 7 columns divide evenly */
  }
  /* v2 ships hidden text inputs inside each .calendar — keep hidden so they
     never add height above the grid */
  body.search-page .pbf-host-pill .daterangepicker_input{ display:none !important; }

  /* --- 3. COMFORTABLE, EVEN DAY CELLS + DOW HEADER SPACING.
     common.css min-width:23px content-box makes cells cramped/uneven once
     widened; normalise to a roomy fixed 7-col grid; height = touch target. */
  body.search-page .pbf-host-pill .calendar-table td,
  body.search-page .pbf-host-pill .calendar-table th,
  body.search-page .pbf-host-pill .drp-calendar td,
  body.search-page .pbf-host-pill .drp-calendar th{
    width:14.2857% !important;
    min-width:0 !important;
    height:38px !important;
    padding:0 !important;
    line-height:38px !important;
    text-align:center !important;
    vertical-align:middle !important;
    box-sizing:border-box !important;
    border:0 !important;
    font-size:13.5px !important;
  }
  /* day-of-week header row (dim. lun. mar. ...): breathing room + tone */
  body.search-page .pbf-host-pill .calendar-table thead tr:last-child th,
  body.search-page .pbf-host-pill .drp-calendar thead tr:last-child th{
    height:30px !important; line-height:30px !important;
    font-size:11.5px !important; font-weight:700 !important;
    text-transform:lowercase !important;
    color:var(--pbd-dim,#6B7785) !important;
  }
  /* hide v2's "week number" column if ever enabled */
  body.search-page .pbf-host-pill th.week,
  body.search-page .pbf-host-pill td.week{ display:none !important; }

  /* --- 4. CLEAN MONTH HEADER + NAV ARROWS (the title row). --------------- */
  body.search-page .pbf-host-pill .calendar-table th.month,
  body.search-page .pbf-host-pill .drp-calendar th.month{
    width:71.4285% !important;   /* colspan-5 month cell = 5/7, so table-layout:fixed splits the 7 day columns EVENLY */
    font-size:15px !important; font-weight:800 !important;
    color:var(--pbd-ink,#0B1D2C) !important; text-transform:capitalize !important;
    height:34px !important; padding:0 0 6px !important; line-height:1.2 !important;
  }
  body.search-page .pbf-host-pill .calendar-table th.prev,
  body.search-page .pbf-host-pill .calendar-table th.next,
  body.search-page .pbf-host-pill .drp-calendar th.prev,
  body.search-page .pbf-host-pill .drp-calendar th.next{
    width:14.2857% !important; min-width:0 !important; height:34px !important;  /* %-width (NOT px) so the colspan month row distributes the 7 columns evenly under table-layout:fixed */
    border-radius:12px !important; cursor:pointer !important;
    transition:background .15s ease !important;
  }
  body.search-page .pbf-host-pill .calendar-table th.prev:hover,
  body.search-page .pbf-host-pill .calendar-table th.next:hover,
  body.search-page .pbf-host-pill .drp-calendar th.prev:hover,
  body.search-page .pbf-host-pill .drp-calendar th.next:hover{
    background:var(--pbd-tint,#FFF3EC) !important;
  }
  body.search-page .pbf-host-pill th.prev span,
  body.search-page .pbf-host-pill th.next span{
    border-color:var(--pbd-ink,#0B1D2C) !important;
  }

  /* --- 5. RANGE / SELECTION SKIN on the REAL v2 cells (.calendar td.*).
     The shipped _dates_r3.css skin only matched .drp-* (v3) so it never hit
     this v2 picker on desktop. Re-apply the identical R3 look here so the
     band / start-end pills / today ring render on the live calendar. ----- */
  body.search-page .pbf-host-pill .calendar-table td.available{
    border-radius:50% !important; color:var(--pbd-ink,#0B1D2C) !important;
    transition:background .12s ease, color .12s ease !important;
  }
  body.search-page .pbf-host-pill .calendar-table td.available:hover{
    background:var(--pbd-tint,#FFF3EC) !important; color:var(--pbd-ink,#0B1D2C) !important;
  }
  body.search-page .pbf-host-pill .calendar-table td.in-range{
    background:var(--pbd-band,#FFE7D6) !important; color:var(--pbd-ink,#0B1D2C) !important; border-radius:0 !important;
  }
  body.search-page .pbf-host-pill .calendar-table td.active,
  body.search-page .pbf-host-pill .calendar-table td.active:hover,
  body.search-page .pbf-host-pill .calendar-table td.start-date,
  body.search-page .pbf-host-pill .calendar-table td.end-date{
    background:var(--pbd-sel,#FE5E00) !important; color:#fff !important; font-weight:800 !important;
  }
  body.search-page .pbf-host-pill .calendar-table td.active.start-date,
  body.search-page .pbf-host-pill .calendar-table td.in-range.start-date{ border-radius:50% 0 0 50% !important; }
  body.search-page .pbf-host-pill .calendar-table td.active.end-date,
  body.search-page .pbf-host-pill .calendar-table td.in-range.end-date{ border-radius:0 50% 50% 0 !important; }
  body.search-page .pbf-host-pill .calendar-table td.today:not(.active):not(.in-range){
    box-shadow:inset 0 0 0 2px var(--pbd-orange,#FE5E00) !important; font-weight:800 !important; border-radius:50% !important;
  }
  body.search-page .pbf-host-pill .calendar-table td.off{ color:#C7CDD4 !important; }
  body.search-page .pbf-host-pill .calendar-table td.disabled,
  body.search-page .pbf-host-pill .calendar-table td.off.disabled{
    color:#D6DBE0 !important; text-decoration:line-through !important; background:none !important;
  }

  /* --- 6. KEEP APPLY / CLEAR AS A FULL-WIDTH ROW BELOW THE MONTHS.
     v2 puts the buttons in .ranges > .range_inputs (.applyBtn / .resetBtn /
     .cancelBtn); v3 uses .drp-buttons. Force either to a clean block row so
     it never joins the inline-block calendar flow. The R3 JS commits/clears
     by clicking these buttons, so their behavior is untouched. ----------- */
  body.search-page .pbf-host-pill .ranges,
  body.search-page .pbf-host-pill .drp-buttons{
    display:block !important; float:none !important; clear:both !important;
    width:100% !important; margin:8px 0 0 !important;
    border-top:1px solid var(--pbd-bdr2,#EEF1F4) !important;
    padding:10px 0 2px !important; text-align:right !important;
  }
  body.search-page .pbf-host-pill .ranges .range_inputs{
    display:flex !important; justify-content:flex-end !important; gap:10px !important;
    width:100% !important; float:none !important;
  }

  /* --- 7. The injected R3 summary + chips span the now-wider dropdown and
     sit above BOTH months (inserted as the host's first children). -------- */
  body.search-page .pbf-host-pill .pbf-date-summary,
  body.search-page .pbf-host-pill .pbf-date-chips{
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    clear:both !important;
  }
}


/* ---- MOBILE DATE SHEET (2026-06-15): kill the dead gap. On the full-screen
   mobile sheet (.pbf-host-sheet, <768px) the two months went SIDE BY SIDE in the
   ~600-767px band = short content + the footer pinned at the viewport bottom =
   a big empty gap (Miguel's screenshot). Force the months to STACK full-width
   (as they already do on a narrow phone) so the content fills the sheet and
   scrolls with NO gap, and the day grid gets roomy even 7-col spacing. Scoped
   to .pbf-host-sheet so the desktop pill (.pbf-host-pill, handled above) and the
   768-991 tablet band are untouched. Outside the min-width:992 media block. */
body.search-page .pbf-host-sheet .calendar,
body.search-page .pbf-host-sheet .calendar.left,
body.search-page .pbf-host-sheet .calendar.right,
body.search-page .pbf-host-sheet .drp-calendar{
  display:block !important; float:none !important; clear:both !important;
  width:100% !important; max-width:100% !important; position:static !important;
  margin:0 0 10px !important; padding:0 !important; border-left:0 !important;
}
body.search-page .pbf-host-sheet .calendar-table table,
body.search-page .pbf-host-sheet table.table-condensed{ width:100% !important; table-layout:fixed !important; }
body.search-page .pbf-host-sheet .calendar-table th.prev,
body.search-page .pbf-host-sheet .calendar-table th.next{ width:14.2857% !important; }
body.search-page .pbf-host-sheet .calendar-table th.month{ width:71.4285% !important; }


/* ---- MOBILE DATE SHEET DEAD-GAP FIX (2026-06-15): .date-mobile-info shipped a
   STALE fixed height (~calc(100vh - 312px)) while the footer .filter-btn is
   position:fixed pinned at the bottom -> a CONSTANT ~163px empty gap between the
   calendar and the "Voir Les Maisons" button at EVERY viewport height (Miguel's
   screenshot: big white space). Fill the info area exactly between the fixed
   header (~60px) and the fixed footer (~75px) and let the calendar scroll inside.
   Verified gap=0 at 844/980/1080. Mobile-only (.date-mobile-drop); desktop pill
   and the docked card are untouched. */
body.search-page .date-mobile-drop .date-mobile-info{
  position:absolute !important; top:60px !important; left:0 !important; right:0 !important; bottom:75px !important;
  height:auto !important; max-height:none !important; min-height:0 !important;
  overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
  padding:14px 0 10px !important;
}

/* PB-DATE-R5-END */



/* ---- FIX 2026-06-15: PRESERVE the app's "Voir tout / Fermer" progressive
   disclosure. The .col-md-6 {display:flex} rules above would otherwise force
   the extra (>4) amenity/property items visible even when .all-list is NOT
   .active, defeating the native collapse. Re-hide them until the app adds
   .active (verified: collapsed shows 4 items @33px, expanded shows all @595px;
   toggle .show-all-toggle stays visible since it is .col-12, not .col-md-6). */
body.search-page .more-filter .filter-list .all-list:not(.active) .col-md-6,
body.search-page .more-filter.pbf-mf-card .filter-list .all-list:not(.active) .col-md-6{ display:none !important; }


/* ---- FIX 2026-06-15: instant-book toggle stray checkmark. The stock theme
   draws a checkmark via label.checkbox::before (content:"¹3"); the beauty
   iOS switch only re-purposed ::after (the sliding knob), so the old check bled
   through onto the orange track when ON. Neutralise ::before on this toggle
   only (does not touch the amenity/property/room custom checks). */
body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox::before{
  content:none !important; display:none !important;
}

/* PB-MF-BEAUTY-END */



/* ---- FIX 2026-06-15: PRESERVE the app's "Voir tout / Fermer" progressive
   disclosure. The .col-md-6 {display:flex} rules above would otherwise force
   the extra (>4) amenity/property items visible even when .all-list is NOT
   .active, defeating the native collapse. Re-hide them until the app adds
   .active (verified: collapsed shows 4 items @33px, expanded shows all @595px;
   toggle .show-all-toggle stays visible since it is .col-12, not .col-md-6). */
body.search-page .more-filter .filter-list .all-list:not(.active) .col-md-6,
body.search-page .more-filter.pbf-mf-card .filter-list .all-list:not(.active) .col-md-6{ display:none !important; }


/* ---- FIX 2026-06-15: instant-book toggle stray checkmark. The stock theme
   draws a checkmark via label.checkbox::before (content:"¹3"); the beauty
   iOS switch only re-purposed ::after (the sliding knob), so the old check bled
   through onto the orange track when ON. Neutralise ::before on this toggle
   only (does not touch the amenity/property/room custom checks). */
body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox::before{
  content:none !important; display:none !important;
}


/* ---- FIX 2026-06-15: sticky card title rendered TRANSPARENT. The section rule
   `.pbf-mf-card > .pbf-mf-scroll > div{background:none !important}` (used to kill
   the old Equipements box) also matched .pbf-mf-title (it is a div child of the
   scroll) and, being MORE specific (0,4,2) than the title's own background:#fff
   (0,4,1), overrode it -> the title was see-through and scrolled content ("Lits"
   etc.) bled through "Filtres". Restore an opaque title background with a
   higher-specificity selector so it cleanly masks content scrolling beneath. */
body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title{ background:#fff !important; }

/* PB-MF-BEAUTY-END */



/* ---- FIX 2026-06-15: PRESERVE the app's "Voir tout / Fermer" progressive
   disclosure. The .col-md-6 {display:flex} rules above would otherwise force
   the extra (>4) amenity/property items visible even when .all-list is NOT
   .active, defeating the native collapse. Re-hide them until the app adds
   .active (verified: collapsed shows 4 items @33px, expanded shows all @595px;
   toggle .show-all-toggle stays visible since it is .col-12, not .col-md-6). */
body.search-page .more-filter .filter-list .all-list:not(.active) .col-md-6,
body.search-page .more-filter.pbf-mf-card .filter-list .all-list:not(.active) .col-md-6{ display:none !important; }


/* ---- FIX 2026-06-15: instant-book toggle stray checkmark. The stock theme
   draws a checkmark via label.checkbox::before (content:"¹3"); the beauty
   iOS switch only re-purposed ::after (the sliding knob), so the old check bled
   through onto the orange track when ON. Neutralise ::before on this toggle
   only (does not touch the amenity/property/room custom checks). */
body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox::before{
  content:none !important; display:none !important;
}


/* ---- FIX 2026-06-15: sticky card title rendered TRANSPARENT. The section rule
   `.pbf-mf-card > .pbf-mf-scroll > div{background:none !important}` (used to kill
   the old Equipements box) also matched .pbf-mf-title (it is a div child of the
   scroll) and, being MORE specific (0,4,2) than the title's own background:#fff
   (0,4,1), overrode it -> the title was see-through and scrolled content ("Lits"
   etc.) bled through "Filtres". Restore an opaque title background with a
   higher-specificity selector so it cleanly masks content scrolling beneath. */
body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title{ background:#fff !important; }


/* ---- FIX 2026-06-15 (final): make the card title NON-STICKY. The sticky title
   kept producing artifacts: first a transparent bg, then an 8px sliver of the
   next section ("Chambres et lits") peeking ABOVE it through the scroll
   container's top padding (sticky top:0 lands 8px below the true top). A static
   title simply scrolls with the content = zero overlap, bulletproof. */
body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title{ position:static !important; }

/* PB-MF-BEAUTY-END */

/* PB-SEARCH-START */
/* ===== PBF-SEARCH (free-text destination search) — added 2026-06 ===== *
 * Curated quick-pick dropdown + injected /s mobile "Rechercher" button.
 * All rules namespaced under unique .pbf-* classes -> cannot collide with
 * site CSS. The dropdown is body-mounted + absolutely positioned by the JS
 * (top/left/width computed from the input) so it escapes any overflow:hidden
 * header. Brand: teal #004D70->#00C9B1, orange #FE5E00, ink #0B1D2C,
 * borders #E6E9ED, card #fff.
 * ===================================================================== */
.pbf-suggest {
  position: absolute;
  z-index: 200000; /* above the sticky header + sticky map controls */
  background: #ffffff;
  border: 1px solid #E6E9ED;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 29, 44, 0.16), 0 2px 8px rgba(11, 29, 44, 0.08);
  padding: 6px;
  max-height: 340px;
  overflow-y: auto;
  font-family: inherit;
  -webkit-overflow-scrolling: touch;
}
.pbf-sug-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: #0B1D2C;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}
.pbf-sug-item + .pbf-sug-item { margin-top: 2px; }
.pbf-sug-item:hover,
.pbf-sug-item.is-active {
  background: linear-gradient(90deg, rgba(0, 77, 112, 0.08), rgba(0, 201, 177, 0.10));
}
.pbf-sug-item.is-active {
  box-shadow: inset 2px 0 0 0 #FE5E00; /* orange roving-focus rail */
}
.pbf-sug-pin {
  color: #FE5E00;
  font-size: 10px;
  line-height: 1;
  flex: 0 0 auto;
}
.pbf-sug-city {
  font-weight: 600;
  color: #0B1D2C;
}
.pbf-sug-region {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: #5A6B7B;
}
/* "Bientot" pill for real destinations whose inventory is not yet verified. */
.pbf-sug-soon {
  margin-left: 8px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #004D70;
  background: rgba(0, 201, 177, 0.16);
  border: 1px solid #E6E9ED;
  border-radius: 999px;
  padding: 2px 8px;
}
.pbf-sug-item:focus-visible { outline: 2px solid #00C9B1; outline-offset: -2px; }

/* Injected "Rechercher" button for the /s mobile search modal (no native one). */
.pbf-mob-go {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #004D70 0%, #00C9B1 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 77, 112, 0.28);
  transition: transform .12s ease, filter .12s ease;
}
.pbf-mob-go:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pbf-mob-go:active { transform: translateY(0); }
.pbf-mob-go:focus-visible { outline: 3px solid rgba(254, 94, 0, 0.55); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pbf-mob-go { transition: none; }
}
/* ===== END PBF-SEARCH ===== */
/* PB-SEARCH-END */



/* ---- FIX 2026-06-15: PRESERVE the app's "Voir tout / Fermer" progressive
   disclosure. The .col-md-6 {display:flex} rules above would otherwise force
   the extra (>4) amenity/property items visible even when .all-list is NOT
   .active, defeating the native collapse. Re-hide them until the app adds
   .active (verified: collapsed shows 4 items @33px, expanded shows all @595px;
   toggle .show-all-toggle stays visible since it is .col-12, not .col-md-6). */
body.search-page .more-filter .filter-list .all-list:not(.active) .col-md-6,
body.search-page .more-filter.pbf-mf-card .filter-list .all-list:not(.active) .col-md-6{ display:none !important; }


/* ---- FIX 2026-06-15: instant-book toggle stray checkmark. The stock theme
   draws a checkmark via label.checkbox::before (content:"¹3"); the beauty
   iOS switch only re-purposed ::after (the sliding knob), so the old check bled
   through onto the orange track when ON. Neutralise ::before on this toggle
   only (does not touch the amenity/property/room custom checks). */
body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox::before{
  content:none !important; display:none !important;
}


/* ---- FIX 2026-06-15: sticky card title rendered TRANSPARENT. The section rule
   `.pbf-mf-card > .pbf-mf-scroll > div{background:none !important}` (used to kill
   the old Equipements box) also matched .pbf-mf-title (it is a div child of the
   scroll) and, being MORE specific (0,4,2) than the title's own background:#fff
   (0,4,1), overrode it -> the title was see-through and scrolled content ("Lits"
   etc.) bled through "Filtres". Restore an opaque title background with a
   higher-specificity selector so it cleanly masks content scrolling beneath. */
body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title{ background:#fff !important; }


/* ---- FIX 2026-06-15 (final): make the card title NON-STICKY. The sticky title
   kept producing artifacts: first a transparent bg, then an 8px sliver of the
   next section ("Chambres et lits") peeking ABOVE it through the scroll
   container's top padding (sticky top:0 lands 8px below the true top). A static
   title simply scrolls with the content = zero overlap, bulletproof. */
body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title{ position:static !important; }


/* ---- "Tout effacer" clear-all control (injected by pbf-mf-beauty.js into the
   desktop card title .pbf-mf-title and the mobile sheet header .pbf-mf-head).
   Resets all More-Filters selections in place; never closes the panel. ---- */
body.search-page .more-filter .pbf-mf-title{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
body.search-page .more-filter .pbf-mf-clear{
  flex:0 0 auto !important; border:0 !important; background:transparent !important;
  color:#004D70 !important; font-size:14px !important; font-weight:700 !important;
  text-decoration:underline !important; text-underline-offset:2px !important;
  cursor:pointer !important; padding:6px 4px !important; margin:0 !important;
  white-space:nowrap !important; border-radius:8px !important; line-height:1.2 !important;
  transition:color .12s ease, background .12s ease !important;
}
body.search-page .more-filter .pbf-mf-clear:hover{ color:#007a64 !important; background:rgba(0,201,177,.10) !important; }
body.search-page .more-filter .pbf-mf-clear:focus-visible{ outline:2px solid #00C9B1 !important; outline-offset:2px !important; }
body.search-page .more-filter .pbf-mf-head .pbf-mf-clear{ margin-left:auto !important; margin-right:6px !important; font-size:13px !important; }

/* PB-MF-BEAUTY-END */

/* PB-MF-BEAUTY-START */
/* =====================================================================
   PB-MF-BEAUTY  —  palmabook.com /s  "Plus de filtres" panel
   FINAL top-0.01% Airbnb/RateHawk skin. Base: "airbnb-clean" + best grafts.
   ---------------------------------------------------------------------
   Layers ON TOP of PB-MF-FIX (pbf-mf-fix.js + _mf_fix.css: docked floating
   card .more-filter.pbf-mf-card with .pbf-mf-scroll body + docked .filter-btn)
   and PB-FILTER-UI / R2 (mobile sheet). Loads LAST in patches-2026.css; every
   selector leads body.search-page + !important.

   SHIPPED-CONTRACT FACTS (verified in source, drive every breakpoint here):
   - pbf-mf-fix.js gates the card at min-width:768px and adds .pbf-mf-card;
     _mf_fix.css styles it at min-width:768px. The live 768-991 centered-modal
     (_live_patches.css 516-548) is OVERRIDDEN by .more-filter.pbf-mf-card
     (later + more specific) and R2-B tablet-modal is DISABLED. So the CARD is
     the active model at ALL >=768px. We scope desktop skin to min-width:768px
     to MATCH, and keep the 768-991 band TOUCH-GRADE (>=40px steppers / 24px
     checks); we only tighten steppers to 34px under (min-width:992) + pointer:fine.
   - Amenities heading: R2 JS rewrites the h4 text to "Équipements" on ALL
     viewports. The R2 pbf-amen-hide{font-size:0}+::after rule is INSIDE
     @media(max-width:991) only. So on >=992 we style the REAL text node, on
     <=991 we style the ::after. Both are covered below.

   ANGULAR-SAFE: native input.amenities / .property_type / .room-type stay in
   the DOM; we only appearance:none them and style :checked + the ADJACENT
   label. Angular keeps reading input.checked. No pointer-intercepting pseudo.
   ===================================================================== */

/* ---- scoped tokens (mirror the live --pbf-* values; self-sufficient) ---- */
body.search-page .more-filter{
  --mf-teal:#00C9B1 !important;
  --mf-teal-deep:#004D70 !important;
  --mf-ink:#0B1D2C !important;
  --mf-dim:#6B7785 !important;
  --mf-bdr:#E6E9ED !important;
  --mf-divider:#EDF0F3 !important;
  --mf-stroke:#C2C9D1 !important;
  --mf-disabled:#C7CDD4 !important;
  --mf-row-hover:#F7F9FA !important;
  --mf-focus:rgba(0,201,177,.45) !important;
  --mf-orange:#FE5E00 !important;
  --mf-orange-soft:#FFF3EC !important;
  --mf-orange-focus:rgba(254,94,0,.45) !important;
}

/* =====================================================================
   1. DESKTOP / TABLET FLOATING CARD  (>=768px)  —  .more-filter.pbf-mf-card
      The fix positions it (position:fixed). We refine the SKIN + scroll body
      only; we never re-position, re-overflow, or relayout the docked footer.
   ===================================================================== */
@media (min-width:768px){
  body.search-page .more-filter.pbf-mf-card{
    border-radius:20px !important;
    box-shadow:0 18px 60px rgba(8,28,46,.16) !important;
    border:1px solid var(--mf-bdr) !important;
  }

  /* scroll region (the fix wraps the sections in .pbf-mf-scroll) */
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll{
    padding:8px 28px 16px !important;
    scrollbar-width:thin !important;
    scrollbar-color:#D4DAE0 transparent !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll::-webkit-scrollbar{
    width:10px !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll::-webkit-scrollbar-thumb{
    background:#D4DAE0 !important; border-radius:8px !important;
    border:3px solid #fff !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll::-webkit-scrollbar-track{
    background:transparent !important;
  }

  /* injected sticky card title (pbf-mf-beauty.js, first child of scroll).
     Hidden if JS off (no node). aria-hidden; a11y name comes from the panel. */
  body.search-page .more-filter.pbf-mf-card .pbf-mf-title{
    position:sticky !important; top:0 !important; z-index:3 !important;
    margin:0 -28px 2px !important; padding:14px 28px 12px !important;
    background:#fff !important;
    box-shadow:0 1px 0 var(--mf-divider) !important;
    font-size:20px !important; font-weight:800 !important;
    letter-spacing:-.015em !important; color:var(--mf-ink) !important;
    line-height:1.2 !important;
  }

  /* ---- section rhythm: ONE thin divider between sections, calm padding.
     Apply the top divider to EVERY scroll child EXCEPT the title and the first
     visible desktop section (.filter-rooms). The mobile-only sections
     (.filter-room_type/.filter-price/.filter-instant_book) are display:none on
     desktop via Bootstrap d-lg-none/d-md-none, so they never paint a stray
     line, and .filter-rooms sits flush under the title (no glitch hairline). */
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > div{
    margin:0 !important;
    padding:24px 0 !important;
    border-top:1px solid var(--mf-divider) !important;
    border-bottom:none !important;
    background:none !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title,
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .filter-rooms{
    border-top:none !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .filter-rooms{
    padding-top:6px !important;
  }
  body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > div:last-child{
    padding-bottom:8px !important;
  }

  /* KILL the odd nested border/box that wrapped the Equipements .filter-list */
  body.search-page .more-filter.pbf-mf-card .filter-list,
  body.search-page .more-filter.pbf-mf-card .filter-rooms,
  body.search-page .more-filter.pbf-mf-card .filter-list .all-list,
  body.search-page .more-filter.pbf-mf-card .filter-list .row{
    border:none !important; background:none !important;
    box-shadow:none !important; border-radius:0 !important;
    padding-left:0 !important; padding-right:0 !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-list .all-list{
    width:100% !important; margin:0 !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-list .row{
    margin-left:0 !important; margin-right:0 !important;
  }

  /* ---- section titles. Two surfaces for the SAME amenities heading:
     (a) the REAL text node, which on >=992 is NOT collapsed (R2 font-size:0 is
         max-width:991 only) — style it here; JS rewrote it to "Équipements".
     (b) the ::after that R2 paints on <=991 — handled in the mobile block. */
  body.search-page .more-filter.pbf-mf-card .filter-list > h4,
  body.search-page .more-filter.pbf-mf-card .filter-rooms > h4{
    font-size:18px !important; font-weight:800 !important;
    letter-spacing:-.01em !important; color:var(--mf-ink) !important;
    margin:0 0 16px !important; line-height:1.25 !important;
    text-transform:none !important;
  }
  /* On the desktop card, the amenities h4 must show its real text at 18px even
     though R2 added .pbf-amen-hide. The R2 font-size:0 rule is gated <=991, so
     on >=992 it does not apply; we still force the size + neutralise ::after so
     no doubled label can appear. */
  body.search-page .more-filter.pbf-mf-card .filter-list > h4.pbf-amen-hide{
    font-size:18px !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-list > h4.pbf-amen-hide::after{
    content:none !important;
  }

  /* =====================================================================
     2. STEPPERS — Airbnb circular counter (.filter-rooms .value-changer)
        Touch-grade 40px by default (covers the 768-991 tablet card surface);
        only tighten to 34px on true pointer-precise desktop (>=992 + fine).
     ===================================================================== */
  body.search-page .more-filter.pbf-mf-card .filter-rooms > h4{
    margin-bottom:8px !important;
  }
  /* row wrapper only (NOT the inner .value-changer, which is also .d-flex) */
  body.search-page .more-filter.pbf-mf-card .filter-rooms > .d-flex{
    padding:8px 0 !important;
    min-height:52px !important;
    align-items:center !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .col-6 > h4,
  body.search-page .more-filter.pbf-mf-card .filter-rooms .col-md-4 > h4{
    font-size:16px !important; font-weight:500 !important;
    color:var(--mf-ink) !important; margin:0 !important; line-height:1.3 !important;
    letter-spacing:0 !important; text-transform:none !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .value-changer{
    gap:0 !important; align-items:center !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .value-button{
    width:40px !important; height:40px !important; flex:0 0 40px !important;
    padding:0 !important; border-radius:50% !important;
    border:1.5px solid var(--mf-stroke) !important; background:#fff !important;
    color:var(--mf-ink) !important; font-size:22px !important; font-weight:400 !important;
    line-height:1 !important; display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
    cursor:pointer !important; box-shadow:none !important;
    transition:border-color .15s ease, color .15s ease, transform .08s ease !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .value-button:active{
    transform:scale(.9) !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .value-button[disabled]{
    opacity:1 !important; border-color:var(--mf-bdr) !important;
    color:var(--mf-disabled) !important; cursor:not-allowed !important; transform:none !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .value-button:focus-visible{
    outline:2px solid var(--mf-focus) !important; outline-offset:2px !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .guest-input{
    width:48px !important; min-width:48px !important; border:none !important;
    background:transparent !important; text-align:center !important;
    font-size:17px !important; font-weight:700 !important;
    color:var(--mf-ink) !important; box-shadow:none !important;
    padding:0 !important; margin:0 6px !important; pointer-events:none !important;
  }

  /* =====================================================================
     3. CUSTOM CHECKBOXES (desktop card) — branded rounded-square + TEAL check.
        Touch-grade 24px box; tick centered dead-center in the box.
     ===================================================================== */
  body.search-page .more-filter.pbf-mf-card input.amenities,
  body.search-page .more-filter.pbf-mf-card input.property_type{
    -webkit-appearance:none !important; appearance:none !important;
    width:24px !important; height:24px !important; flex:0 0 24px !important;
    margin:0 12px 0 0 !important; padding:0 !important;
    border:1.6px solid var(--mf-stroke) !important; border-radius:8px !important;
    background:#fff !important; cursor:pointer !important; position:relative !important;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
  }
  body.search-page .more-filter.pbf-mf-card input.amenities:checked,
  body.search-page .more-filter.pbf-mf-card input.property_type:checked{
    background:linear-gradient(135deg,#004D70,#00C9B1) !important;
    border-color:#004D70 !important;
  }
  /* dead-center tick: 6x11 glyph in a 24px box -> left:(24-2*1.6-6)/2≈7.4, but
     the glyph's optical mass sits on its lower-right; left:8/top:5 centers it. */
  body.search-page .more-filter.pbf-mf-card input.amenities:checked::after,
  body.search-page .more-filter.pbf-mf-card input.property_type:checked::after{
    content:"" !important; position:absolute !important;
    left:8px !important; top:4px !important;
    width:6px !important; height:11px !important;
    border:solid #fff !important; border-width:0 2.2px 2.2px 0 !important;
    transform:rotate(45deg) !important;
  }
  body.search-page .more-filter.pbf-mf-card input.amenities:focus-visible,
  body.search-page .more-filter.pbf-mf-card input.property_type:focus-visible{
    outline:none !important;
    box-shadow:0 0 0 3px var(--mf-focus) !important;
    border-color:var(--mf-teal-deep) !important;
  }

  /* item rows + labels: comfortable rhythm, full-row hover affordance */
  body.search-page .more-filter.pbf-mf-card .filter-list .col-md-6{
    padding:7px 8px 7px 0 !important; margin:0 !important;
    display:flex !important; align-items:center !important;
    border-radius:10px !important;
    transition:background .12s ease !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-list label{
    font-size:15px !important; font-weight:500 !important;
    color:var(--mf-ink) !important; cursor:pointer !important;
    line-height:1.3 !important; margin:0 !important; flex:1 1 auto !important;
  }

  /* "Voir tout / Fermer" toggle = quiet underlined teal link + chevron */
  body.search-page .more-filter.pbf-mf-card .show-all-toggle{
    margin-top:6px !important; padding:6px 0 0 !important; cursor:pointer !important;
  }
  body.search-page .more-filter.pbf-mf-card .show-all-toggle .all-property,
  body.search-page .more-filter.pbf-mf-card .show-all-toggle .close-property{
    font-size:14px !important; font-weight:700 !important;
    color:var(--mf-teal-deep) !important; cursor:pointer !important;
    text-decoration:underline !important; text-underline-offset:3px !important;
  }
  body.search-page .more-filter.pbf-mf-card .show-all-toggle .fa-angle-down{
    color:var(--mf-teal-deep) !important; font-size:14px !important;
    transition:transform .2s ease !important;
  }
  body.search-page .more-filter.pbf-mf-card .show-all-toggle.pbf-mf-open .fa-angle-down{
    transform:rotate(180deg) !important;
  }

  /* =====================================================================
     4. DESKTOP FOOTER — refine the docked action row (do NOT relayout it).
        Keep the existing teal apply pill; Annuler becomes a quiet link.
     ===================================================================== */
  body.search-page .more-filter.pbf-mf-card > .filter-btn{
    gap:16px !important;
  }
  body.search-page .more-filter.pbf-mf-card > .filter-btn .cancel-filter{
    order:-1 !important; margin:0 auto 0 0 !important;
    font-size:15px !important; font-weight:700 !important;
    color:var(--mf-ink) !important; text-decoration:underline !important;
    text-underline-offset:3px !important; white-space:nowrap !important;
  }
  body.search-page .more-filter.pbf-mf-card > .filter-btn .apply-filter{
    flex:0 0 auto !important; margin:0 !important;
  }

  /* the injected mobile sheet header has no place in the desktop card */
  body.search-page .more-filter.pbf-mf-card .pbf-mf-head{ display:none !important; }

  /* HOVER affordances — gated so touch tablets (768-991) don't stick-hover */
  @media (hover:hover) and (pointer:fine){
    body.search-page .more-filter.pbf-mf-card .filter-rooms .value-button:hover{
      border-color:var(--mf-ink) !important; color:var(--mf-ink) !important;
    }
    body.search-page .more-filter.pbf-mf-card input.amenities:hover,
    body.search-page .more-filter.pbf-mf-card input.property_type:hover{
      border-color:var(--mf-teal-deep) !important;
    }
    body.search-page .more-filter.pbf-mf-card .filter-list .col-md-6:hover{
      background:var(--mf-row-hover) !important;
    }
    body.search-page .more-filter.pbf-mf-card .show-all-toggle:hover .all-property,
    body.search-page .more-filter.pbf-mf-card .show-all-toggle:hover .close-property{
      color:var(--mf-teal) !important;
    }
    body.search-page .more-filter.pbf-mf-card > .filter-btn .cancel-filter:hover{
      color:var(--mf-teal-deep) !important;
    }
  }
}

/* ---- TRUE DESKTOP pointer-precise tightening: 34px steppers (>=992 + fine).
   The 768-991 tablet band (and any coarse pointer) keeps the 40px touch size
   from the block above — this resolves the judges' tablet tap-target blocker. */
@media (min-width:992px) and (pointer:fine){
  body.search-page .more-filter.pbf-mf-card .filter-rooms > .d-flex{
    min-height:48px !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .value-button{
    width:34px !important; height:34px !important; flex:0 0 34px !important;
    border-width:1.4px !important; font-size:20px !important;
  }
  body.search-page .more-filter.pbf-mf-card .filter-rooms .guest-input{
    width:44px !important; min-width:44px !important; font-size:16px !important;
  }
}

/* =====================================================================
   5. MOBILE SHEET POLISH  (<=767px)  —  keep the orange brand system.
      Base PB-FILTER-UI/R2 does the heavy lifting; we add rhythm, bigger tap
      targets, branded checks, polished room-type cards + a real toggle.
   ===================================================================== */
@media (max-width:767px){
  body.search-page .more-filter > div{ margin:0 0 22px !important; }
  body.search-page .more-filter .filter-list,
  body.search-page .more-filter .filter-rooms,
  body.search-page .more-filter .filter-room_type,
  body.search-page .more-filter .filter-price,
  body.search-page .more-filter .filter-instant_book{
    border:none !important; background:none !important;
    box-shadow:none !important; border-radius:0 !important;
    padding:20px 0 !important;
    border-top:1px solid var(--mf-divider) !important;
  }
  body.search-page .more-filter > div:first-child{ border-top:none !important; }

  /* section titles (real text node where present) */
  body.search-page .more-filter .filter-list > h4,
  body.search-page .more-filter .filter-rooms > h4,
  body.search-page .more-filter .filter-room_type > h4,
  body.search-page .more-filter .filter-price > h4{
    font-size:18px !important; font-weight:800 !important;
    letter-spacing:-.01em !important; color:var(--mf-ink) !important;
    margin:0 0 14px !important; text-transform:none !important;
  }
  /* amenities heading on <=991: R2 collapses the text node (font-size:0) and
     paints the word via ::after. Restyle that ::after to our scale. */
  body.search-page .more-filter .filter-list > h4.pbf-amen-hide::after{
    font-size:18px !important; font-weight:800 !important;
    letter-spacing:-.01em !important; text-transform:none !important;
    color:var(--mf-ink) !important;
  }

  /* steppers: circular counter, >=44px touch (52px row) */
  body.search-page .more-filter .filter-rooms > .d-flex{ min-height:52px !important; align-items:center !important; }
  body.search-page .more-filter .filter-rooms .col-6 > h4,
  body.search-page .more-filter .filter-rooms .col-md-4 > h4{
    font-size:16px !important; font-weight:500 !important; margin:0 !important;
    letter-spacing:0 !important; text-transform:none !important;
  }
  body.search-page .more-filter .filter-rooms .value-button{
    width:44px !important; height:44px !important; flex:0 0 44px !important;
    border-radius:50% !important; border:1.5px solid var(--mf-stroke) !important;
    background:#fff !important; color:var(--mf-ink) !important;
    font-size:24px !important; font-weight:400 !important; line-height:1 !important;
    display:inline-flex !important; align-items:center !important;
    justify-content:center !important; padding:0 !important;
    transition:border-color .15s ease, transform .08s ease !important;
  }
  body.search-page .more-filter .filter-rooms .value-button:active{ transform:scale(.9) !important; }
  body.search-page .more-filter .filter-rooms .value-button[disabled]{
    opacity:1 !important; border-color:var(--mf-bdr) !important; color:var(--mf-disabled) !important;
    cursor:not-allowed !important; transform:none !important;
  }
  body.search-page .more-filter .filter-rooms .value-button:focus-visible{
    outline:2px solid var(--mf-orange-focus) !important; outline-offset:2px !important;
  }
  body.search-page .more-filter .filter-rooms .guest-input{
    width:52px !important; min-width:52px !important; border:none !important;
    background:transparent !important; text-align:center !important;
    font-size:18px !important; font-weight:700 !important; color:var(--mf-ink) !important;
    margin:0 6px !important; padding:0 !important; pointer-events:none !important;
  }

  /* amenities / property_type rows: full-row 44px tap target */
  body.search-page .more-filter .filter-list .col-md-6{
    padding:10px 4px 10px 0 !important; margin:0 !important; min-height:44px !important;
    display:flex !important; align-items:center !important;
  }
  body.search-page .more-filter .filter-list label{
    font-size:15px !important; font-weight:500 !important; flex:1 1 auto !important;
    color:var(--mf-ink) !important; margin:0 !important; line-height:1.35 !important;
  }
  /* mobile checks keep the ORANGE system (matches mobile CTA/slider); 24px.
     R2 already appearance:none's these to a 22px box; we enlarge + recenter. */
  body.search-page .more-filter input.amenities,
  body.search-page .more-filter input.property_type,
  body.search-page .more-filter input.room-type{
    width:24px !important; height:24px !important; flex:0 0 24px !important;
    margin:0 12px 0 0 !important; border-radius:8px !important;
    border:1.6px solid var(--mf-stroke) !important;
  }
  body.search-page .more-filter input.amenities:checked,
  body.search-page .more-filter input.property_type:checked{
    background:var(--mf-orange) !important; border-color:var(--mf-orange) !important;
  }
  body.search-page .more-filter input.amenities:checked::after,
  body.search-page .more-filter input.property_type:checked::after,
  body.search-page .more-filter input.room-type:checked::after{
    left:8px !important; top:4px !important; width:6px !important; height:11px !important;
    border-width:0 2.2px 2.2px 0 !important;
  }
  body.search-page .more-filter input.amenities:focus-visible,
  body.search-page .more-filter input.property_type:focus-visible{
    outline:2px solid var(--mf-orange-focus) !important; outline-offset:2px !important;
  }

  /* room-type cards (.type-info label + .type-img): selectable bordered cards.
     Robust selector: target the per-item .d-flex children of the .col-12
     wrapper (blade: .filter-room_type > .d-flex.mt-3 > .col-12.p-0 > @foreach .d-flex). */
  body.search-page .more-filter .filter-room_type .col-12 > .d-flex{
    align-items:center !important; gap:12px !important;
    padding:12px 14px !important; margin:0 0 10px !important;
    border:1.5px solid var(--mf-bdr) !important; border-radius:14px !important;
    background:#fff !important; position:relative !important;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
  }
  body.search-page .more-filter .filter-room_type .col-12 > .d-flex:last-child{
    margin-bottom:0 !important;
  }
  /* hide the native room-type box; the whole card / label.type-info is the target.
     Visually hidden but kept in DOM + a11y tree so Angular reads input.checked. */
  body.search-page .more-filter .filter-room_type input.room-type{
    position:absolute !important; opacity:0 !important;
    width:1px !important; height:1px !important; margin:0 !important; padding:0 !important;
    clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
    pointer-events:none !important;
  }
  body.search-page .more-filter .filter-room_type label.type-info{
    flex:1 1 auto !important; order:1 !important; margin:0 !important; padding:0 !important;
    cursor:pointer !important;
  }
  body.search-page .more-filter .filter-room_type label.type-info h4{
    font-size:16px !important; font-weight:700 !important; margin:0 0 2px !important;
    color:var(--mf-ink) !important; text-transform:none !important; letter-spacing:0 !important;
  }
  body.search-page .more-filter .filter-room_type label.type-info p{
    font-size:13px !important; color:var(--mf-dim) !important; margin:0 !important; line-height:1.4 !important;
  }
  body.search-page .more-filter .filter-room_type .type-img{
    order:2 !important; flex:0 0 auto !important; margin-left:auto !important;
    width:44px !important; height:44px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    border-radius:12px !important; background:var(--mf-orange-soft) !important;
  }
  body.search-page .more-filter .filter-room_type .type-img i{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  body.search-page .more-filter .filter-room_type .type-img img{
    width:26px !important; height:26px !important; object-fit:contain !important;
  }
  /* NON-:has fallback (always paints): selected -> orange title. */
  body.search-page .more-filter .filter-room_type input.room-type:checked + label.type-info h4{
    color:var(--mf-orange) !important;
  }
  /* JS adds .pbf-mf-checked on the card for the ring/tint (robust everywhere) */
  body.search-page .more-filter .filter-room_type .col-12 > .d-flex.pbf-mf-checked{
    border-color:var(--mf-orange) !important; background:var(--mf-orange-soft) !important;
    box-shadow:0 0 0 1px var(--mf-orange) inset !important;
  }
  /* :has enhancement (Baseline 2026) — same result, no JS needed where supported */
  body.search-page .more-filter .filter-room_type .col-12 > .d-flex:has(input.room-type:checked){
    border-color:var(--mf-orange) !important; background:var(--mf-orange-soft) !important;
    box-shadow:0 0 0 1px var(--mf-orange) inset !important;
  }
  body.search-page .more-filter .filter-room_type input.room-type:focus-visible + label.type-info h4{
    text-decoration:underline !important; text-underline-offset:3px !important;
    text-decoration-color:var(--mf-orange) !important;
  }

  /* "Voir tout / Fermer" toggle on mobile: orange link + rotating chevron */
  body.search-page .more-filter .show-all-toggle{ margin-top:10px !important; padding:4px 0 !important; }
  body.search-page .more-filter .show-all-toggle .all-property,
  body.search-page .more-filter .show-all-toggle .close-property{
    font-size:15px !important; font-weight:700 !important;
    color:var(--mf-orange) !important; text-decoration:underline !important;
    text-underline-offset:3px !important;
  }
  body.search-page .more-filter .show-all-toggle .fa-angle-down{
    color:var(--mf-orange) !important; transition:transform .2s ease !important;
  }
  body.search-page .more-filter .show-all-toggle.pbf-mf-open .fa-angle-down{
    transform:rotate(180deg) !important;
  }

  /* PRICE: chip values + reinforce orange slider (R2 styles the noUi base) */
  body.search-page .more-filter .filter-price .price-label{ align-items:center !important; }
  body.search-page .more-filter .filter-price .price-label .price-min{
    display:inline-flex !important; align-items:baseline !important; gap:2px !important;
    padding:8px 14px !important; border:1px solid var(--mf-bdr) !important;
    border-radius:11px !important; background:#fff !important;
    font-size:15px !important; color:var(--mf-ink) !important;
  }
  body.search-page .more-filter .filter-price .price-label .price-min .price{
    font-weight:800 !important; color:var(--mf-ink) !important;
  }
  body.search-page .more-filter .filter-price .price-label > .mx-2{ color:var(--mf-dim) !important; }

  /* INSTANT-BOOK: title + desc + a real iOS-style 52x30 orange toggle.
     Angular adds .instant-checked on label.checkbox (blade L973). */
  body.search-page .more-filter .filter-instant_book .instant-book{
    align-items:center !important; gap:14px !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-info{ flex:1 1 auto !important; }
  body.search-page .more-filter .filter-instant_book .instant-info h4{
    font-size:16px !important; font-weight:700 !important; margin:0 0 3px !important;
    color:var(--mf-ink) !important; display:flex !important; align-items:center !important; gap:6px !important;
    text-transform:none !important; letter-spacing:0 !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-info p{
    font-size:13px !important; color:var(--mf-dim) !important; margin:0 !important; line-height:1.4 !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-checkbox{ flex:0 0 auto !important; }
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox{
    position:relative !important; display:inline-block !important;
    width:52px !important; height:30px !important; flex:0 0 52px !important;
    margin:0 !important; padding:0 !important;
    border-radius:999px !important; background:#D6DBE0 !important;
    cursor:pointer !important; transition:background .18s ease !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox input{
    position:absolute !important; opacity:0 !important;
    width:100% !important; height:100% !important; margin:0 !important; cursor:pointer !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox::after{
    content:"" !important; position:absolute !important; top:3px !important; left:3px !important;
    width:24px !important; height:24px !important; border-radius:50% !important;
    background:#fff !important; box-shadow:0 1px 4px rgba(8,28,46,.30) !important;
    transition:transform .18s cubic-bezier(.22,1,.36,1) !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox.instant-checked{
    background:var(--mf-orange) !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox.instant-checked::after{
    transform:translateX(22px) !important;
  }
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox:focus-within{
    outline:2px solid var(--mf-orange-focus) !important; outline-offset:2px !important;
  }
}

/* =====================================================================
   6. REDUCED MOTION — neutralise this block's decorative transitions only.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  body.search-page .more-filter .filter-list .col-md-6,
  body.search-page .more-filter input.amenities,
  body.search-page .more-filter input.property_type,
  body.search-page .more-filter .show-all-toggle .fa-angle-down,
  body.search-page .more-filter .filter-rooms .value-button,
  body.search-page .more-filter .filter-room_type .col-12 > .d-flex,
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox,
  body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox::after{
    transition:none !important;
  }
}

/* PB-MF-BEAUTY-END */


/* ---- FIX 2026-06-15: PRESERVE the app's "Voir tout / Fermer" progressive
   disclosure. The .col-md-6 {display:flex} rules above would otherwise force
   the extra (>4) amenity/property items visible even when .all-list is NOT
   .active, defeating the native collapse. Re-hide them until the app adds
   .active (verified: collapsed shows 4 items @33px, expanded shows all @595px;
   toggle .show-all-toggle stays visible since it is .col-12, not .col-md-6). */
body.search-page .more-filter .filter-list .all-list:not(.active) .col-md-6,
body.search-page .more-filter.pbf-mf-card .filter-list .all-list:not(.active) .col-md-6{ display:none !important; }


/* ---- FIX 2026-06-15: instant-book toggle stray checkmark. The stock theme
   draws a checkmark via label.checkbox::before (content:"¹3"); the beauty
   iOS switch only re-purposed ::after (the sliding knob), so the old check bled
   through onto the orange track when ON. Neutralise ::before on this toggle
   only (does not touch the amenity/property/room custom checks). */
body.search-page .more-filter .filter-instant_book .instant-checkbox label.checkbox::before{
  content:none !important; display:none !important;
}


/* ---- FIX 2026-06-15: sticky card title rendered TRANSPARENT. The section rule
   `.pbf-mf-card > .pbf-mf-scroll > div{background:none !important}` (used to kill
   the old Equipements box) also matched .pbf-mf-title (it is a div child of the
   scroll) and, being MORE specific (0,4,2) than the title's own background:#fff
   (0,4,1), overrode it -> the title was see-through and scrolled content ("Lits"
   etc.) bled through "Filtres". Restore an opaque title background with a
   higher-specificity selector so it cleanly masks content scrolling beneath. */
body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title{ background:#fff !important; }


/* ---- FIX 2026-06-15 (final): make the card title NON-STICKY. The sticky title
   kept producing artifacts: first a transparent bg, then an 8px sliver of the
   next section ("Chambres et lits") peeking ABOVE it through the scroll
   container's top padding (sticky top:0 lands 8px below the true top). A static
   title simply scrolls with the content = zero overlap, bulletproof. */
body.search-page .more-filter.pbf-mf-card > .pbf-mf-scroll > .pbf-mf-title{ position:static !important; }


/* ---- "Tout effacer" clear-all control (injected by pbf-mf-beauty.js into the
   desktop card title .pbf-mf-title and the mobile sheet header .pbf-mf-head).
   Resets all More-Filters selections in place; never closes the panel. ---- */
body.search-page .more-filter .pbf-mf-title{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
body.search-page .more-filter .pbf-mf-clear{
  flex:0 0 auto !important; border:0 !important; background:transparent !important;
  color:#004D70 !important; font-size:14px !important; font-weight:700 !important;
  text-decoration:underline !important; text-underline-offset:2px !important;
  cursor:pointer !important; padding:6px 4px !important; margin:0 !important;
  white-space:nowrap !important; border-radius:8px !important; line-height:1.2 !important;
  transition:color .12s ease, background .12s ease !important;
}
body.search-page .more-filter .pbf-mf-clear:hover{ color:#007a64 !important; background:rgba(0,201,177,.10) !important; }
body.search-page .more-filter .pbf-mf-clear:focus-visible{ outline:2px solid #00C9B1 !important; outline-offset:2px !important; }
body.search-page .more-filter .pbf-mf-head .pbf-mf-clear{ margin-left:auto !important; margin-right:6px !important; font-size:13px !important; }

/* PB-MF-BEAUTY-END */

/* PB-CARDNAV-START */
/* =====================================================================
   PB-CARDNAV (2026-06-15) — listing photo carousel arrows ALWAYS visible.
   The blade styled/showed the prev/next arrows ONLY inside @media(min-width:992)
   on card :hover (opacity:0 by default) -> invisible on touch/mobile and easy to
   miss on desktop. The arrows already WORK (Angular .s-carousel) and carry inline
   SVG chevrons; we only make them visible + tappable on EVERY viewport. Scoped to
   .search-list so nothing else is touched. Loads LAST -> wins the cascade.
   ===================================================================== */
body.search-page .search-list .s-carousel__btn{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  opacity:.92 !important;
  visibility:visible !important;
  width:32px !important; height:32px !important;
  padding:0 !important; margin:0 !important;
  background:rgba(255,255,255,.95) !important;
  color:#0B1D2C !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:0 2px 8px rgba(8,28,46,.22) !important;
  z-index:4 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:opacity .18s ease, background .18s ease, transform .12s ease !important;
}
body.search-page .search-list .s-carousel__prev{ left:8px !important; right:auto !important; }
body.search-page .search-list .s-carousel__next{ right:8px !important; left:auto !important; }
/* brighten on hover (desktop) */
body.search-page .search-list .s-carousel:hover .s-carousel__btn,
body.search-page .search-list > div:hover .s-carousel__btn{ opacity:1 !important; }
body.search-page .search-list .s-carousel__btn:hover{ background:#ffffff !important; }
body.search-page .search-list .s-carousel__btn:active{ transform:translateY(-50%) scale(.92) !important; }
body.search-page .search-list .s-carousel__btn:focus-visible{ outline:2px solid rgba(254,94,0,.7) !important; outline-offset:1px !important; opacity:1 !important; }
/* touch devices have no hover -> keep arrows fully visible + larger tap target */
@media (hover:none){
  body.search-page .search-list .s-carousel__btn{ opacity:1 !important; width:36px !important; height:36px !important; }
}


/* ---- DOTS: were 21x8 white PILLS spread full-width (left:0), active==inactive
   (both solid white) -> looked like white "lines/bars" and ran to the bottom-
   right. Restyle to clean, CENTERED, small round dots; active = solid white +
   slightly larger, inactive = translucent. ---- */
body.search-page .search-list .s-carousel__dots{
  left:50% !important; right:auto !important; width:auto !important; max-width:70% !important;
  transform:translateX(-50%) !important; bottom:10px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:6px !important; padding:0 !important; margin:0 !important; background:none !important;
}
body.search-page .search-list .s-carousel__dot{
  width:6px !important; height:6px !important; min-width:6px !important; flex:0 0 auto !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.55) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.35) !important;
  transition:width .2s ease, height .2s ease, background .2s ease !important;
}
body.search-page .search-list .s-carousel__dots .s-carousel__dot.active{
  width:8px !important; height:8px !important; min-width:8px !important;
  border-radius:50% !important;            /* a ROUND dot, NOT the 16px pill ("ligne") */
  background:#ffffff !important;
}

/* ===== END PB-CARDNAV ===== */

/* PB-CARDNAV-END */

/* PB-MENU-START */
/* =====================================================================
   PB-MENU (2026-06-15) — header ACCOUNT dropdown (S'inscrire / S'identifier
   / Aide). It was 160px wide with cramped 14px items. Make it wider and more
   legible (Airbnb-clean). Targets only the account menu (.custom-arrow.top-right
   inside the header), never the language switcher or other dropdowns.
   ===================================================================== */
header .dropdown-menu.custom-arrow.top-right,
.dropdown-menu.custom-arrow.top-right{
  min-width:228px !important;
  padding:8px !important;
  border-radius:14px !important;
  border:1px solid #E6E9ED !important;
  box-shadow:0 14px 36px rgba(11,29,44,.18), 0 2px 8px rgba(11,29,44,.06) !important;
  /* RIGHT-align to the toggle so the wider menu opens LEFT and never overflows
     the right edge (on /s, body.overflow-x:clip would otherwise CLIP it). */
  left:auto !important;
  right:0 !important;
  max-width:calc(100vw - 24px) !important;
}
header .dropdown-menu.custom-arrow.top-right a,
header .dropdown-menu.custom-arrow.top-right button,
.dropdown-menu.custom-arrow.top-right a,
.dropdown-menu.custom-arrow.top-right button{
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  padding:12px 16px !important;
  border-radius:10px !important;
  color:#0B1D2C !important;
  white-space:nowrap !important;
}
header .dropdown-menu.custom-arrow.top-right a:hover,
header .dropdown-menu.custom-arrow.top-right button:hover,
.dropdown-menu.custom-arrow.top-right a:hover,
.dropdown-menu.custom-arrow.top-right button:hover{
  background:#F4F6F8 !important;
  color:#0B1D2C !important;
}
/* ===== END PB-MENU ===== */

/* PB-MENU-END */

/* PB-MODAL-FIX-START */
/* PB-MODAL-FIX 2026-06-16 : ROOT CAUSE — main#site-content has position:relative;z-index:1,
   creating a stacking context BELOW #pbFooter (z:10). Every Bootstrap .modal nested inside
   <main> was therefore trapped under the footer + backdrop, no matter its own z-index.
   FIX: drop main's stacking context so fixed modals escape to the root layer. Safe: main's
   z:1 was already below the footer's z:10, so normal rendering is unchanged; this only frees
   position:fixed descendants (modals). Verified live (logged in): wishlist modal now renders
   centered, on top, with backdrop. */
main#site-content{ z-index:auto !important; }
/* belt-and-suspenders: modal + backdrop above the cookie banner (z:99999) and footer */
body .modal{ z-index:100050 !important; }
body .modal.show, body .modal.in{ overflow-y:auto !important; }
body .modal-backdrop{ z-index:100040 !important; }
#pbFooter{ z-index:1 !important; }
@media (max-width:575.98px){ body .modal-dialog{ margin:.5rem auto !important; } }

/* PB-MODAL-FIX-END */

/* PB-PAYOUT-FIX-START */
/* PB-PAYOUT-FIX 2026-06-16 : the "add payout method" modal table squeezed the DETAILS column
   to one word per line. The table #payout_method_descriptions lives in #payout-preference-popup2.
   Widen the modal + let cells wrap normally + mobile horizontal scroll. Scoped to IDs that exist
   ONLY on the payout page -> physically cannot affect any other page. */
#payout-preference-popup1 .modal-dialog,
#payout-preference-popup2 .modal-dialog{ max-width:760px !important; }
#payout_method_descriptions{ table-layout:auto !important; width:100% !important; }
#payout_method_descriptions th, #payout_method_descriptions td{ white-space:normal !important; vertical-align:middle !important; }
#payout_method_descriptions td:last-child, #payout_method_descriptions th:last-child{ min-width:190px !important; }
@media (max-width:767.98px){
  #payout-preference-popup2 .modal-body{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
  #payout_method_descriptions{ min-width:640px !important; }
}

/* PB-PAYOUT-FIX-END */

/* PB-CONV-FIX-START */
/* =============================================================================
   PB-CONV-FIX  2026-06-16  ·  /z/q/{id} guest conversation  ·  FINAL (REVIEWED)
   Verified against resources/views/users/guest_conversation.blade.php + live DOM.
   CSS-ONLY · every selector scoped under .guest-conversation · loads LAST in
   patches-2026.css (!important allowed) · NO markup/JS/Angular changes.
   Fully reversible: delete this whole block to restore the prior state.

   REVIEW CHANGE vs the proposed block: section 8's mobile overflow guard no
   longer puts overflow-x:hidden on .guest-conversation / .container (that clip
   box could crop the payment .tooltip-wrap popover). The guard is now scoped to
   the nested .row elements, with a max-width:100% safety on the container.
   ============================================================================= */

/* 0) DESIGN TOKENS — scoped CSS vars (ignored by ancient browsers). */
.guest-conversation{
  --pb-gutter: 24px;
  --pb-radius: 16px;
  --pb-radius-sm: 12px;
  --pb-avatar: 48px;
  --pb-rail: 64px;
  --pb-ink: #222222;
  --pb-muted: #717171;
  --pb-hair: #ebebeb;
  --pb-surface: #f7f7f8;
  --pb-tint: #f0f4ff;
  --pb-card-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --pb-card-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
}

/* 1) COLUMN ALIGNMENT — top-align both columns + consistent inter-col gutter. */
.guest-conversation .container > .row{
  align-items: flex-start !important;
}
@media (min-width: 768px){
  .guest-conversation .container > .row{
    margin-left: calc(var(--pb-gutter) / -2) !important;
    margin-right: calc(var(--pb-gutter) / -2) !important;
  }
  .guest-conversation .container > .row > [class*="col-"]{
    padding-left: calc(var(--pb-gutter) / 2) !important;
    padding-right: calc(var(--pb-gutter) / 2) !important;
  }
  .guest-conversation .col-md-5.order-md-1{ margin-top: 0 !important; }
}
.guest-conversation .messaging-thread-main > div:first-child,
.guest-conversation .messaging-thread-main .banner-status:first-child{
  margin-top: 0 !important;
}
.guest-conversation .messaging-thread-main .banner-status h4{ margin-top: 0 !important; }
.guest-conversation .col-md-5.order-md-1 > form,
.guest-conversation .mini-profile.card{ margin-top: 0 !important; }

/* 2) NESTED-ROW GUTTER RESET — re-contain Bootstrap -15px rows inside columns. */
.guest-conversation #post_message_box.row,
.guest-conversation #thread-list .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: flex-start !important;
}

/* 3) AVATAR RAIL — fixed track so avatars + bubbles align on one x. */
.guest-conversation .send-message-box .col-2.profile-img,
.guest-conversation #thread-list .col-2.profile-img{
  -ms-flex: 0 0 var(--pb-rail) !important;
  flex: 0 0 var(--pb-rail) !important;
  max-width: var(--pb-rail) !important;
  min-width: var(--pb-rail) !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
  padding-top: 2px !important;
}
.guest-conversation .send-message-box .col-10,
.guest-conversation #thread-list .row .col-10{
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
  max-width: calc(100% - var(--pb-rail)) !important;
}
.guest-conversation .send-message-box .col-2.profile-img img,
.guest-conversation #thread-list .col-2.profile-img img{
  width: var(--pb-avatar) !important;
  height: var(--pb-avatar) !important;
  max-width: var(--pb-avatar) !important;
  min-width: var(--pb-avatar) !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  border: 1px solid var(--pb-hair) !important;
}

/* 4) "DEMANDE ENVOYEE" BANNER + action card. */
.guest-conversation .messaging-thread-main .banner-status{
  margin: 0 0 var(--pb-gutter) !important;
  padding: 18px 20px !important;
  background: var(--pb-surface) !important;
  border: 1px solid var(--pb-hair) !important;
  border-radius: var(--pb-radius) !important;
}
.guest-conversation .messaging-thread-main .banner-status h4{
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  color: var(--pb-ink) !important;
  margin-bottom: 6px !important;
}
.guest-conversation .messaging-thread-main .banner-status p{
  font-size: .9375rem !important;
  line-height: 1.5 !important;
  color: var(--pb-muted) !important;
  margin-bottom: 0 !important;
}
.guest-conversation .messaging-thread-main .banner-status .btn{
  margin-top: 12px !important;
  border-radius: 10px !important;
}
.guest-conversation .messaging-thread-main .action-status.card{
  border: 1px solid var(--pb-hair) !important;
  border-radius: var(--pb-radius) !important;
  box-shadow: var(--pb-card-shadow) !important;
  margin-bottom: var(--pb-gutter) !important;
}

/* 5) COMPOSE BOX. */
.guest-conversation .send-message-box{ margin-bottom: var(--pb-gutter) !important; }
.guest-conversation .send-message-box .card{
  border: 1px solid var(--pb-hair) !important;
  border-radius: var(--pb-radius) !important;
  box-shadow: var(--pb-card-shadow) !important;
  overflow: hidden !important;
}
.guest-conversation .send-message-box .card-body{ padding: 0 !important; }
.guest-conversation .send-message-box .pb-chat-textarea,
.guest-conversation .send-message-box .send-message-textarea{
  width: 100% !important;
  min-height: 84px !important;
  padding: 16px 18px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--pb-ink) !important;
  border: 0 !important;
  resize: vertical !important;
  outline: none !important;
  box-shadow: none !important;
}
.guest-conversation .send-message-box .send-message-textarea::placeholder{ color: #b0b0b0 !important; }
.guest-conversation .send-message-box .card-footer{
  background: #fafafa !important;
  border-top: 1px solid var(--pb-hair) !important;
  padding: 12px 14px !important;
  text-align: right !important;
}
.guest-conversation .send-message-box .pb-btn-send{
  border-radius: 10px !important;
  padding: 9px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.guest-conversation .send-message-box .pb-btn-send:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16,24,40,.12) !important;
}

/* 6) MESSAGE THREAD — tint sits on .card-body.pb-msg-bubble; flatten wrap card. */
.guest-conversation #thread-list .row{
  margin-top: 0 !important;
  margin-bottom: var(--pb-gutter) !important;
}
.guest-conversation #thread-list .card{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.guest-conversation #thread-list .pb-msg-bubble{
  border-radius: var(--pb-radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--pb-ink) !important;
}
.guest-conversation #thread-list .pb-msg-bubble.left{ background: #f7f7f7 !important; }
.guest-conversation #thread-list .pb-msg-bubble.right{ background: var(--pb-tint) !important; }
.guest-conversation #thread-list .message-text{ display: block !important; word-break: break-word !important; }
.guest-conversation #thread-list .time{ margin-top: 6px !important; margin-bottom: 0 !important; }
.guest-conversation #thread-list .time span{ font-size: 12px !important; color: var(--pb-muted) !important; }
.guest-conversation #thread-list .inline-status{
  text-align: center !important;
  color: var(--pb-muted) !important;
  font-size: 13px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.guest-conversation #thread-list .inline-status span{ margin: 0 4px !important; }

/* 7) LEFT COLUMN — frame the WHOLE column (photo + host + listing + payment) as
   ONE unified card (Airbnb-style), so the reservation/payment are no longer loose
   OUTSIDE the frame. The <form> is the real wrapper of all three blocks. */
.guest-conversation .col-md-5.order-md-1 > form{
  border: 1px solid var(--pb-hair) !important;
  border-radius: var(--pb-radius) !important;
  box-shadow: var(--pb-card-shadow) !important;
  background: #fff !important;
  padding: 24px !important;
  overflow: hidden !important;
}
/* inner mini-profile block: drop its own frame (now lives inside the unified card) */
.guest-conversation .mini-profile.card{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}
/* photo = full-bleed banner at the very top of the unified card */
.guest-conversation .mini-profile .profile-image{ width: auto !important; margin: -24px -24px 18px !important; }
.guest-conversation .mini-profile .profile-image a{ display: block !important; }
.guest-conversation .mini-profile .profile-image img{
  width: 100% !important;
  max-width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
  border: 0 !important;
}
.guest-conversation .mini-profile .mt-3.text-center{ margin-top: 0 !important; }
.guest-conversation .mini-profile .theme-link{
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--pb-ink) !important;
  line-height: 1.3 !important;
}
.guest-conversation .mini-profile .text-medium-gray,
.guest-conversation .mini-profile .expandable-content p{
  color: var(--pb-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.guest-conversation .mini-profile .border-top{ border-top-color: var(--pb-hair) !important; }
.guest-conversation .mini-profile .border-top h5{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pb-ink) !important;
  margin-bottom: 4px !important;
}

/* Reservation block — preserve d-flex + d-md-block label/value toggle. */
.guest-conversation .reservation-info{
  margin-top: 22px !important;
  margin-bottom: 22px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--pb-hair) !important;
}
.guest-conversation .reservation-info .room-link{
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--pb-ink) !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
}
.guest-conversation .reservation-info-section span{
  color: var(--pb-muted) !important;
  font-size: 13px !important;
}
.guest-conversation .reservation-info-section h5{
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pb-ink) !important;
  margin-bottom: 0 !important;
}

/* Payment table — zero nested-row gutters so values line to the right edge. */
.guest-conversation .guest-payment-info{ margin: 22px 0 0 !important; }
.guest-conversation .guest-payment-info > h4{
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pb-ink) !important;
  margin: 0 0 14px !important;
}
.guest-conversation .guest-payment-info .mt-4{ margin-top: 0 !important; }
.guest-conversation .guest-payment-info .d-flex.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: baseline !important;
}
.guest-conversation .guest-payment-info .d-flex.row > .col-8,
.guest-conversation .guest-payment-info .d-flex.row > .col-4{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.guest-conversation .guest-payment-info .d-flex.my-2.row{
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.guest-conversation .guest-payment-info .col-8 span{ color: #4b5563 !important; font-size: 14px !important; }
.guest-conversation .guest-payment-info .col-4 span{ color: var(--pb-ink) !important; font-size: 14px !important; }
.guest-conversation .guest-payment-info .border-top{ border-top: 1px solid var(--pb-hair) !important; }
.guest-conversation .guest-payment-info .d-flex.mt-3.pt-3.border-top{
  margin-top: 14px !important;
  padding-top: 14px !important;
  align-items: baseline !important;
}
.guest-conversation .guest-payment-info .d-flex.mt-3.pt-3.border-top .col-8 span{ font-size: 15px !important; color: var(--pb-ink) !important; }
.guest-conversation .guest-payment-info .d-flex.mt-3.pt-3.border-top .col-4 strong span{ font-size: 16px !important; }
.guest-conversation .guest-payment-info .font-weight-bold,
.guest-conversation .guest-payment-info strong span{ font-weight: 700 !important; }
.guest-conversation .guest-payment-info .my-4{
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  font-size: 13px !important;
  color: #9aa0a6 !important;
  line-height: 1.5 !important;
}

/* 8) MOBILE — single col; tighten rail; prevent sideways scroll WITHOUT a clip
   box on .guest-conversation/.container (which would crop the payment tooltip). */
@media (max-width: 767.98px){
  .guest-conversation{ --pb-rail: 56px; }
  .guest-conversation .col-md-5.order-md-1{ margin-top: var(--pb-gutter) !important; }
  .guest-conversation .mini-profile.card{ padding: 20px !important; }
  .guest-conversation .container,
  .guest-conversation .container > .row{
    max-width: 100% !important;
  }
  .guest-conversation #post_message_box.row,
  .guest-conversation #thread-list .row{
    overflow-x: hidden !important;
  }
}
@media (max-width: 575.98px){
  .guest-conversation .messaging-thread-main .banner-status h4{ font-size: 1rem !important; }
  .guest-conversation .send-message-box .pb-btn-send{ white-space: nowrap !important; }
}

/* 9) REDUCED MOTION. */
@media (prefers-reduced-motion: reduce){
  .guest-conversation .send-message-box .pb-btn-send{ transition: none !important; }
  .guest-conversation .send-message-box .pb-btn-send:hover{ transform: none !important; box-shadow: none !important; }
}
/* PB-CONV-FIX-END */

/* PB-PRINT-START */
/* PB-PRINT 2026-06-16 : impression propre de l'itineraire (/reservation/itinerary).
   N'affecte QUE l'impression -> ne peut pas changer le rendu ecran. */
@media print{
  body header, body #pbFooter, body .pb-ft-cta, body #pb-cookie-consent, body .cookie-consent, body .subheader{ display:none !important; }
  body .reservation-print{ padding:0 !important; }
  body .reservation-print .card{ box-shadow:none !important; border:1px solid #ddd !important; }
  body .reservation-print a{ color:#000 !important; text-decoration:none !important; }
  body .reservation-print .d-print-none{ display:none !important; }
}

/* PB-PRINT-END */