/* ============================================================
   HostSejour — Présentation DESKTOP (≥1024px + souris : ordinateur uniquement)
   Template repris du design « les meubles » (style Airbnb) :
   en-tête logo+actions, grilles de cartes, galerie, book-card,
   pied de page 4 colonnes. Accent = rouge marque (#D52B1E).
   Tout est gated en @media (min-width:1024px) : mobile ET tablette
   gardent la présentation mobile (voir tablet.css).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* En-tête / pied desktop + blocs desktop masqués par défaut (mobile) */
.lc-dnav, .lc-dfoot, .lc-pdp, .lc-home, .lc-vt { display: none; }
/* Enveloppe deux panneaux de la messagerie : sans effet hors desktop. */
.cv-shell { display: contents; }
.cv-side, .cv-empty, .cv-frame { display: none; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

  :root {
    --max-width: 1120px;
    --page-px:   0px;
    /* Bridge tokens design → thème (accent conservé rouge) */
    --lm-bg:            #FAFAF7;
    --lm-surface:       #FFFFFF;
    --lm-surface-alt:   #F4F4EE;
    --lm-surface-muted: #EBEBE5;
    --lm-ink:           #0A0A0A;
    --lm-ink-soft:      #404040;
    --lm-ink-faint:     #A3A3A3;
    --lm-border:        #E5E5E2;
    --lm-border-strong: #C7C7C2;
    --lm-accent:        #D52B1E;
    --lm-accent-strong: #B21E13;
    --lm-accent-soft:   #FBE0DD;
    --lm-radius-sm:     8px;
    --lm-radius:        12px;
    --lm-radius-lg:     18px;
    --lm-radius-pill:   999px;
    --lm-shadow-sm:     0 1px 2px rgba(10,10,10,.05);
    --lm-shadow-lg:     0 14px 36px rgba(10,10,10,.10);
    --lm-font-text:     "Manrope", system-ui, sans-serif;
    --lm-font-display:  "Manrope", system-ui, sans-serif;
    --lm-font-mono:     "JetBrains Mono", ui-monospace, monospace;
  }

  body {
    background: var(--lm-bg);
    padding-top: 84px;
    font-family: "Manrope", system-ui, sans-serif;
  }

  /* position: sticky est neutralisé quand un ancêtre coupe le débordement :
     page-search-filters et single-listing posent overflow-x:hidden sur
     html/body pour le mobile. Sur desktop on le rend visible, sinon ni la
     carte ni le bloc de réservation ne peuvent flotter. */
  html, body { overflow-x: visible !important; }

  /* ── Élargir le shell mobile en conteneur desktop ── */
  .app-shell,
  .page-wrap,
  .page-content {
    max-width: 1120px !important;
    margin: 0 auto !important;
    background: transparent !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .page-content { padding-bottom: 60px !important; }

  /* Masquer la navigation mobile du bas + barres flottantes mobiles.
     .g-nav est la barre des pages profil/recherche : elle traînait encore. */
  .bottom-nav,
  .bottom-nav--host,
  .g-nav,
  .lc-bottom-nav,
  .navbar-mobile,
  .mobile-tabbar { display: none !important; }
  /* Plus de barre en bas : pas besoin de réserver sa hauteur */
  .page-content, .app-shell { padding-bottom: 60px !important; }

  /* ── En-tête desktop (design les meubles) ── */
  .lc-dnav {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background: var(--lm-surface);
    border-bottom: 1px solid var(--lm-border);
  }
  .lc-dnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 48px;
    gap: 24px;
  }
  .lc-dnav__logo {
    font-weight: 800; font-size: 21px; letter-spacing: -.02em;
    color: var(--lm-ink); text-decoration: none;
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  .lc-dnav__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lm-accent); }
  .lc-dnav__logo-img { height: 38px; width: auto; display: block; }
  .lc-dnav__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  /* Formulaire de recherche présent dans l'en-tête de toutes les pages */
  .lc-dnav__search {
    display: flex; align-items: center; gap: 0;
    background: var(--lm-surface); border: 1px solid var(--lm-border);
    border-radius: 999px; box-shadow: var(--lm-shadow-sm);
    padding: 4px 4px 4px 6px; flex: 0 1 520px; min-width: 0; max-width: 520px; margin: 0 auto;
  }
  .lc-dnav__search input {
    border: none; outline: none; background: transparent; font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--lm-ink); min-width: 0; padding: 8px 12px;
  }
  .lc-dnav__search input::placeholder { color: var(--lm-ink-faint); font-weight: 500; }
  .lc-dnav__search .s-dest { flex: 1.4; }
  .lc-dnav__search .s-date { flex: 1; max-width: 130px; }
  .lc-dnav__search .s-div { width: 1px; height: 18px; background: var(--lm-border); flex-shrink: 0; }
  .lc-dnav__search button {
    flex-shrink: 0; margin-left: 2px; width: 38px; height: 38px; border-radius: 50%;
    border: none; background: var(--lm-accent); display: flex; align-items: center;
    justify-content: center; cursor: pointer;
  }
  .lc-dnav__search button:hover { background: var(--lm-accent-strong); }
  @media (max-width: 1180px) { .lc-dnav__search { display: none; } }
  .lc-dnav__host {
    font-size: 13px; font-weight: 700; color: var(--lm-ink);
    text-decoration: none; padding: 10px 14px; border-radius: 999px;
    transition: background .2s;
  }
  .lc-dnav__host:hover { background: var(--lm-surface-alt); }
  .lc-dnav__ghost {
    font-size: 12px; font-weight: 600; color: var(--lm-ink);
    text-decoration: none; height: 36px; display: inline-flex; align-items: center;
    padding: 0 12px; border-radius: 999px; border: 1.5px solid transparent;
  }
  .lc-dnav__ghost:hover { background: var(--lm-surface-alt); }
  .lc-dnav__cta, .lc-dnav__acct {
    font-size: 12px; font-weight: 600; color: #fff; background: var(--lm-accent);
    text-decoration: none; height: 36px; display: inline-flex; align-items: center;
    padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--lm-accent);
    transition: background .2s;
  }
  .lc-dnav__cta:hover, .lc-dnav__acct:hover { background: var(--lm-accent-strong); }

  /* ── Pied de page desktop 4 colonnes (design) ── */
  .lc-dfoot {
    display: block;
    border-top: 1px solid var(--lm-border);
    background: var(--lm-surface-alt);
    margin-top: 48px;
  }
  .lc-dfoot__cols {
    max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
    padding: 56px 48px 40px;
  }
  .lc-dfoot__col h5 { font-size: 13px; font-weight: 700; margin-bottom: 16px; color: var(--lm-ink); }
  .lc-dfoot__col a { display: block; font-size: 13px; color: var(--lm-ink-soft); margin-bottom: 12px; text-decoration: none; }
  .lc-dfoot__col a:hover { color: var(--lm-ink); }
  .lc-dfoot__bottom {
    max-width: 1120px; margin: 0 auto;
    border-top: 1px solid var(--lm-border); padding: 22px 48px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--lm-ink-soft);
  }

  /* Le bloc fixe header+catégories de la page Explorer : sous l'en-tête desktop */
  .dh-sticky { top: 84px !important; }

  /* ============================================================
     ACCUEIL / EXPLORER — grilles de cartes (design listing-grid)
     ============================================================ */
  .content { padding: 0 48px !important; max-width: 1120px; margin: 0 auto; }

  .rec-wrap { overflow: visible !important; }
  .rec-inner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: auto !important;
  }
  .rec-inner .rec-card {
    width: auto !important; flex: none !important; min-width: 0 !important;
    cursor: pointer;
  }
  /* Image carte : coins arrondis, ratio design */
  .rec-card__img, .rec-card__media, .rec-card__photo {
    border-radius: var(--lm-radius-lg) !important;
    aspect-ratio: 4 / 3.2 !important; height: auto !important;
    overflow: hidden;
  }
  .rec-card__title, .rec-card h4 { font-size: 15px !important; font-weight: 700 !important; }

  /* Section titres façon design */
  .section-head, .section-title { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.01em; }

  /* ── Recherche : liste → grille 3 colonnes ── */
  .sr__body { padding-left: 48px; padding-right: 48px; }
  .sr__list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
  .sr__list .sr__card { flex-direction: column !important; }
  .sr__card-img { border-radius: var(--lm-radius-lg) !important; aspect-ratio: 4 / 3.2; }

  /* ============================================================
     DÉTAIL ANNONCE — galerie mosaïque + book-card sticky (design)
     ============================================================ */
  /* ── Page annonce : masquer le rendu mobile, afficher le rendu desktop ── */
  body:has(.lc-pdp) .page,
  body:has(.lc-pdp) .bottom-bar,
  body:has(.lc-pdp) #price-sheet { display: none !important; }

  .lc-pdp { display: block; }
  .lc-pdp__wrap { max-width: 1120px; margin: 0 auto; padding: 0 48px; }

  .lc-pdp__crumb { font-size: 13px; color: var(--lm-ink-soft); padding: 20px 0 6px; }
  .lc-pdp__crumb a { color: var(--lm-ink-soft); text-decoration: none; }
  .lc-pdp__crumb a:hover { color: var(--lm-ink); }

  .lc-pdp__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; }
  .lc-pdp__titlerow h1 { font-weight: 800; font-size: 30px; letter-spacing: -.01em; margin-bottom: 8px; color: var(--lm-ink); }
  .lc-pdp__meta { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--lm-ink-soft); }
  .lc-pdp__rating { display: flex; align-items: center; gap: 5px; color: var(--lm-ink); font-weight: 700; }
  .lc-pdp__loc { display: flex; align-items: center; gap: 5px; }
  .lc-pdp__actions { display: flex; gap: 8px; flex-shrink: 0; }
  .lc-pdp__pill { display: flex; align-items: center; gap: 7px; border: none; background: transparent; font-size: 13px; font-weight: 700; color: var(--lm-ink); padding: 8px 4px; cursor: pointer; border-bottom: 1px solid transparent; }
  .lc-pdp__pill:hover { border-bottom-color: var(--lm-ink); }

  /* Galerie mosaïque façon Airbnb (1 grande + 4, coins extérieurs arrondis) */
  .lc-pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; border-radius: 16px; overflow: hidden; aspect-ratio: 2/1; max-height: 480px; position: relative; margin-bottom: 40px; }
  .lc-pdp__gcell { min-width: 0; min-height: 0; overflow: hidden; background: var(--lm-surface-alt); }
  .lc-pdp__gcell:first-child { grid-row: 1 / 3; }
  .lc-pdp__gallery { grid-template-columns: 2fr 1fr 1fr; }
  .lc-pdp__gcell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s; }
  .lc-pdp__gcell:hover img { filter: brightness(.9); cursor: pointer; }
  .lc-pdp__gmore { position: absolute; right: 16px; bottom: 16px; background: #fff; border: 1px solid var(--lm-ink); padding: 8px 15px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--lm-ink); text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
  .lc-pdp__gmore:hover { background: #F4F4F4; text-decoration: none; }

  .lc-pdp__grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; padding-bottom: 64px; }
  .lc-pdp__block { padding: 28px 0; border-bottom: 1px solid var(--lm-border); }
  .lc-pdp__block:last-child { border-bottom: none; }
  .lc-pdp__block h2 { font-weight: 700; font-size: 19px; margin-bottom: 16px; color: var(--lm-ink); }

  .lc-pdp__host { display: flex; align-items: center; gap: 14px; }
  .lc-pdp__havatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#D52B1E,#7A160E); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 19px; flex-shrink: 0; }
  .lc-pdp__havatar img { width: 100%; height: 100%; object-fit: cover; }
  .lc-pdp__hname { font-weight: 700; font-size: 16px; color: var(--lm-ink); }
  .lc-pdp__hsub { font-size: 13px; color: var(--lm-ink-soft); margin-top: 2px; }
  .lc-pdp__chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--lm-surface-muted); font-size: 12px; font-weight: 600; color: var(--lm-ink); }
  .lc-pdp__chip--ok { background: var(--lm-success-soft, #D6EAE0); color: #1B5E3F; }
  .lc-pdp__chips { display: flex; gap: 8px; flex-wrap: wrap; }

  .lc-pdp__desc p { font-size: 15px; line-height: 1.65; color: var(--lm-ink-soft); }

  .lc-pdp__amen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .lc-pdp__amrow { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--lm-ink); }
  .lc-pdp__amic { width: 36px; height: 36px; border-radius: 8px; background: var(--lm-surface-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--lm-ink); }

  .lc-pdp__revsum { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
  .lc-pdp__revsum b { font-size: 24px; font-weight: 800; }
  .lc-pdp__revsum span { color: var(--lm-ink-soft); font-size: 14px; }
  .lc-pdp__revgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .lc-pdp__revauth { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .lc-pdp__revav { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#B4D4E8,#B4E8C4); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 14px; }
  .lc-pdp__revname { font-size: 13px; font-weight: 700; }
  .lc-pdp__revdate { font-size: 12px; color: var(--lm-ink-faint); }
  .lc-pdp__revtext { font-size: 14px; color: var(--lm-ink-soft); line-height: 1.55; }

  /* ── Sections reprises du mobile : conditions, carte, hôte, dispos ── */
  .lc-pdp__seeall {
    display: inline-block; margin-top: 18px; padding: 11px 18px;
    border: 1px solid var(--lm-ink); border-radius: 10px;
    font-size: 14px; font-weight: 700; color: var(--lm-ink); text-decoration: none;
  }
  .lc-pdp__seeall:hover { background: var(--lm-surface-alt); color: var(--lm-ink); text-decoration: none; }

  .lc-pdp__rules { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .lc-pdp__rule { display: flex; align-items: center; gap: 12px; }
  .lc-pdp__rule div { display: flex; flex-direction: column; }
  .lc-pdp__rule b { font-size: 14px; font-weight: 700; color: var(--lm-ink); }
  .lc-pdp__rule span { font-size: 13px; color: var(--lm-ink-soft); }

  .lc-pdp__map { height: 380px; border-radius: var(--lm-radius-lg); overflow: hidden; border: 1px solid var(--lm-border); background: var(--lm-surface-alt); }
  .lc-pdp__mapaddr { font-size: 13px; color: var(--lm-ink-soft); margin-top: 10px; }

  .lc-pdp__hostpub {
    display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--lm-ink);
    border: 1px solid var(--lm-border); border-radius: var(--lm-radius-lg); padding: 16px 18px; background: var(--lm-surface);
  }
  .lc-pdp__hostpub:hover { border-color: var(--lm-border-strong); color: var(--lm-ink); text-decoration: none; }
  .lc-pdp__contact {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
    padding: 13px 20px; border-radius: 12px; background: var(--lm-surface-alt);
    border: 1px solid var(--lm-border); font-size: 14px; font-weight: 700;
    color: var(--lm-ink); text-decoration: none;
  }
  .lc-pdp__contact:hover { background: var(--lm-surface-muted); color: var(--lm-ink); text-decoration: none; }

  .lc-pdp__availnote { font-size: 13px; color: var(--lm-ink-soft); margin-bottom: 14px; }
  .lc-pdp__avail { border: 1px solid var(--lm-border); border-radius: var(--lm-radius-lg); padding: 18px; background: var(--lm-surface); max-width: 460px; }
  .lc-pdp__avnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .lc-pdp__avnav span { font-size: 15px; font-weight: 700; }
  .lc-pdp__avnav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lm-border); background: var(--lm-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--lm-ink); }
  .lc-pdp__avnav button:disabled { opacity: .35; cursor: default; }
  .lc-pdp__avwd, .lc-pdp__avdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .lc-pdp__avwd span { text-align: center; font-size: 11px; font-weight: 700; color: var(--lm-ink-faint); padding-bottom: 6px; }
  .lc-pdp__avd { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 13px; font-weight: 600; }
  /* Bulles douces : vert = libre, rouge = pris */
  .lc-pdp__avd--free  { background: #E6F4EC; color: #1B5E3F; }
  .lc-pdp__avd--taken { background: #FBE4E1; color: #B0392C; text-decoration: line-through; }
  .lc-pdp__avd--out   { background: transparent; }
  .lc-pdp__avlegend { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--lm-ink-soft); }
  .lc-pdp__avlegend span { display: flex; align-items: center; gap: 6px; }
  .lc-pdp__avlegend i { width: 12px; height: 12px; border-radius: 4px; display: block; }
  .lc-pdp__avlegend .free { background: #E6F4EC; }
  .lc-pdp__avlegend .taken { background: #FBE4E1; }

  .lc-pdp__report {
    display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 32px;
    font-size: 13px; font-weight: 600; color: var(--lm-ink-soft); text-decoration: underline;
  }
  .lc-pdp__report:hover { color: var(--lm-ink); }

  /* Carte réservation (design book-card) */
  .lc-pdp__book { position: sticky; top: 108px; align-self: start; max-height: calc(100vh - 128px); overflow-y: auto; border: 1px solid var(--lm-border); border-radius: var(--lm-radius-lg); box-shadow: var(--lm-shadow-lg); padding: 24px; background: var(--lm-surface); }
  .lc-pdp__bprice { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
  .lc-pdp__bamt { font-size: 22px; font-weight: 800; color: var(--lm-ink); }
  .lc-pdp__bsuf { font-size: 14px; color: var(--lm-ink-soft); }
  .lc-pdp__brate { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
  /* Encadré dates/voyageurs (Airbnb) */
  .lc-pdp__bfields { display: block; border: 1px solid var(--lm-ink); border-radius: 10px; overflow: hidden; margin: 0 0 14px; text-decoration: none; color: var(--lm-ink); }
  .lc-pdp__bfields:hover { text-decoration: none; color: var(--lm-ink); }
  .lc-pdp__bfrow { display: grid; grid-template-columns: 1fr 1fr; }
  .lc-pdp__bfield { padding: 9px 12px; border-right: 1px solid var(--lm-border); }
  .lc-pdp__bfrow .lc-pdp__bfield:last-child { border-right: none; }
  .lc-pdp__bfield--full { border-top: 1px solid var(--lm-border); border-right: none; }
  .lc-pdp__bfield label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--lm-ink); margin-bottom: 2px; }
  .lc-pdp__bfield .v { font-size: 13px; color: var(--lm-ink-soft); }

  .lc-pdp__bbtn { display: block; width: 100%; text-align: center; background: var(--lm-accent); color: #fff; font-weight: 600; font-size: 16px; padding: 14px; border-radius: 8px; text-decoration: none; transition: background .2s; }
  .lc-pdp__bbtn:hover { background: var(--lm-accent-strong); text-decoration: none; color: #fff; }
  .lc-pdp__bnote { text-align: center; font-size: 12px; color: var(--lm-ink-soft); margin-top: 12px; }
  .lc-pdp__bbreak { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lm-border); display: flex; flex-direction: column; gap: 10px; }
  .lc-pdp__brow { display: flex; justify-content: space-between; font-size: 13px; color: var(--lm-ink-soft); }
  .lc-pdp__btot { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--lm-border); color: var(--lm-ink); }
}


/* ============================================================
   ACCUEIL DESKTOP — maquette « Accueil Desktop-2.html » reprise
   à l'identique : en-tête collant + recherche compacte, hero,
   catégories rapides, grille de destinations, grilles 4 cartes,
   encart hôte, pied de page 4 colonnes. Tout est préfixé
   .lc-home pour ne rien toucher au reste du site.
   ============================================================ */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* La maquette porte son propre en-tête et son propre pied de page */
  body:has(.lc-home) .page-wrap,
  body:has(.lc-home) .lc-dnav,
  body:has(.lc-home) .lc-dfoot { display: none !important; }
  body:has(.lc-home) { background: var(--lm-bg); padding-top: 0 !important; }

  .lc-home { display: block; font-family: var(--lm-font-text, "Manrope", system-ui, sans-serif); color: var(--lm-ink); }
  .lc-home *, .lc-home *::before, .lc-home *::after { box-sizing: border-box; }
  .lc-home a { color: var(--lm-accent); text-decoration: none; }
  .lc-home a:hover { color: var(--lm-accent-strong); }
  .lc-home img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .lc-home .wrap { max-width: 1360px; margin: 0 auto; padding: 0 48px; }
  .lc-home .section { padding: 64px 0; }
  .lc-home .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
  .lc-home .section-head h2 { font-family: var(--lm-font-display, inherit); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; color: var(--lm-ink); }
  .lc-home .section-head .seeall { font-size: 14px; font-weight: 600; }
  .lc-home .eyebrow { font-family: var(--lm-font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-accent); }

  /* Boutons de la maquette (lm-btn) */
  .lc-home .lch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: var(--lm-radius-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
  .lc-home .lch-btn--primary { background: var(--lm-accent); color: #fff; }
  .lc-home .lch-btn--primary:hover { background: var(--lm-accent-strong); color: #fff; }
  .lc-home .lch-btn--ghost { background: var(--lm-surface); color: var(--lm-ink); border-color: var(--lm-border); }
  .lc-home .lch-btn--ghost:hover { background: var(--lm-surface-alt); color: var(--lm-ink); }
  .lc-home .lch-btn--lg { font-size: 15px; padding: 15px 26px; }

  /* ── En-tête ─────────────────────────── */
  .lc-home .lch-header { position: sticky; top: 0; z-index: 100; background: var(--lm-surface); border-bottom: 1px solid var(--lm-border); }
  .lc-home .hd-row { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .lc-home .logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .lc-home .logo-img { height: 40px; width: auto; object-fit: contain; }
  .lc-home .hd-actions { display: flex; align-items: center; gap: 10px; }
  .lc-home .hd-host { font-size: 13px; font-weight: 700; color: var(--lm-ink); padding: 10px 14px; white-space: nowrap; flex-shrink: 0; border-radius: var(--lm-radius-pill); }
  .lc-home .hd-host:hover { background: var(--lm-surface-alt); color: var(--lm-ink); }
  .lc-home .hd-search-compact { display: flex; align-items: center; gap: 0; background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: var(--lm-radius-pill); box-shadow: var(--lm-shadow-sm); padding: 4px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; flex: 0 1 520px; min-width: 0; max-width: 520px; margin: 0 auto; }
  .lc-home .hd-search-compact.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .lc-home .hsc-seg { font-size: 12px; font-weight: 700; padding: 8px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--lm-ink); }
  /* Champs réels de la barre compacte : ils remplissent la pilule, sinon
     tout se tassait à gauche avec un grand vide avant le bouton. */
  .lc-home .hsc-in {
    border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 12px; font-weight: 600; color: var(--lm-ink);
    padding: 8px 12px; min-width: 0; flex: 1 1 0;
  }
  .lc-home .hsc-in::placeholder { color: var(--lm-ink-faint); font-weight: 500; }
  .lc-home .hsc-in--dest   { flex: 1.6 1 0; }
  .lc-home .hsc-in--date   { flex: 1.1 1 0; }
  .lc-home .hsc-in--guests { flex: .8 1 0; }
  .lc-home .hsc-in--guests::-webkit-outer-spin-button,
  .lc-home .hsc-in--guests::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .lc-home .hd-search-compact { padding: 4px 4px 4px 6px; }
  .lc-home .hsc-div { width: 1px; height: 18px; background: var(--lm-border); flex-shrink: 0; }
  .lc-home .hsc-btn { flex-shrink: 0; margin-left: 2px; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--lm-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .lc-home .icon-circle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--lm-border); background: var(--lm-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--lm-ink); transition: border-color .2s; flex-shrink: 0; }
  .lc-home .icon-circle:hover { border-color: var(--lm-border-strong); color: var(--lm-ink); }

  /* ── Hero ───────────────────────────── */
  .lc-home .hero { padding: 72px 0 48px; text-align: center; }
  .lc-home .hero h1 { font-family: var(--lm-font-display, inherit); font-weight: 800; font-size: clamp(36px, 4.4vw, 54px); letter-spacing: -0.02em; line-height: 1.05; max-width: 760px; margin: 0 auto 16px; color: var(--lm-ink); }
  .lc-home .hero p { font-size: 17px; color: var(--lm-ink-soft); max-width: 520px; margin: 0 auto 36px; }

  .lc-home .search-bar { max-width: 920px; margin: 0 auto; background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: var(--lm-radius-pill); box-shadow: var(--lm-shadow-lg); display: flex; align-items: stretch; padding: 6px; }
  .lc-home .search-seg { flex: 1; min-width: 0; text-align: left; padding: 12px 26px; border-radius: var(--lm-radius-pill); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background .2s; }
  .lc-home .search-seg:hover { background: var(--lm-surface-alt); }
  .lc-home .seg-label { font-size: 11px; font-weight: 700; color: var(--lm-ink); }
  .lc-home .seg-value { font-size: 13px; color: var(--lm-ink); border: none; outline: none; background: transparent; font-family: inherit; width: 100%; padding: 0; }
  .lc-home .seg-value::placeholder { color: var(--lm-ink-faint); }
  .lc-home .seg-div { width: 1px; background: var(--lm-border); margin: 10px 0; flex-shrink: 0; }
  .lc-home .search-btn { flex-shrink: 0; align-self: center; margin-left: 4px; height: 56px; padding: 0 26px; border: none; border-radius: var(--lm-radius-pill); background: var(--lm-accent); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background .2s; }
  .lc-home .search-btn:hover { background: var(--lm-accent-strong); }

  /* ── Catégories rapides ─────────────── */
  .lc-home .qcats { display: flex; justify-content: center; gap: 40px; padding: 36px 48px 8px; border-bottom: 1px solid var(--lm-border); }
  .lc-home .qcat { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; opacity: .55; transition: opacity .2s; padding-bottom: 16px; border-bottom: 2px solid transparent; color: var(--lm-ink); }
  .lc-home .qcat:hover { opacity: .9; color: var(--lm-ink); }
  .lc-home .qcat.active { opacity: 1; border-bottom-color: var(--lm-ink); }
  .lc-home .qcat-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--lm-surface-alt); display: flex; align-items: center; justify-content: center; }
  .lc-home .qcat span { font-size: 12px; font-weight: 600; white-space: nowrap; }

  /* ── Grille des destinations ────────── */
  .lc-home .dest-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .lc-home .dest-card { position: relative; border-radius: var(--lm-radius-lg); overflow: hidden; aspect-ratio: 3/4; background: var(--lm-surface-alt); }
  .lc-home .dest-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.72) 100%); pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
  .lc-home .dest-scrim h3 { color: #fff; font-family: var(--lm-font-display, inherit); font-weight: 700; font-size: 17px; margin-bottom: 2px; }
  .lc-home .dest-scrim span { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 500; }

  /* ── Grille des logements ───────────── */
  .lc-home .listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  /* main.css donne aux .listing-card un fond blanc + ombre : la maquette les
     veut à plat sur le fond de page, sans bloc blanc sous le texte. */
  .lc-home .listing-card { cursor: pointer; color: var(--lm-ink); background: transparent; box-shadow: none; border: none; border-radius: 0; overflow: visible; padding: 0; }
  .lc-home .listing-card:hover { color: var(--lm-ink); }
  .lc-home .listing-img { position: relative; border-radius: var(--lm-radius-lg); overflow: hidden; aspect-ratio: 4/3.2; background: var(--lm-surface-alt); margin-bottom: 12px; }
  .lc-home .listing-img img { transition: transform .25s ease; }
  .lc-home .listing-card:hover .listing-img img { transform: scale(1.04); }
  .lc-home .listing-chip { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; padding: 5px 11px; border-radius: 6px; font-size: 11px; font-weight: 700; pointer-events: none; color: var(--lm-ink); }
  .lc-home .listing-like { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; display: flex; align-items: center; justify-content: center; }
  .lc-home .listing-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
  .lc-home .listing-top h4 { font-size: 15px; font-weight: 700; color: var(--lm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lc-home .listing-rating { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
  .lc-home .listing-loc { font-size: 13px; color: var(--lm-ink-soft); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lc-home .listing-price { font-size: 14px; color: var(--lm-ink); }
  .lc-home .listing-price b { font-weight: 800; }
  .lc-home .listing-price .suf { color: var(--lm-ink-soft); font-weight: 500; }

  /* ── Encart hôte ────────────────────── */
  .lc-home .host-cta { background: var(--lm-surface-alt); border-radius: var(--lm-radius-lg); padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .lc-home .host-copy h2 { font-family: var(--lm-font-display, inherit); font-weight: 800; font-size: 32px; letter-spacing: -0.01em; margin: 10px 0 14px; line-height: 1.15; color: var(--lm-ink); }
  .lc-home .host-copy p { font-size: 15px; color: var(--lm-ink-soft); line-height: 1.6; margin-bottom: 26px; max-width: 440px; }
  .lc-home .host-stats { display: flex; gap: 36px; margin-top: 28px; }
  .lc-home .host-stats b { display: block; font-family: var(--lm-font-display, inherit); font-size: 24px; font-weight: 800; color: var(--lm-ink); }
  .lc-home .host-stats span { font-size: 12px; color: var(--lm-ink-soft); }
  .lc-home .host-visual { position: relative; border-radius: var(--lm-radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--lm-shadow-lg); background: var(--lm-surface-muted); }

  /* ── Pied de page ───────────────────── */
  .lc-home .lch-footer { border-top: 1px solid var(--lm-border); background: var(--lm-surface-alt); }
  .lc-home .foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 56px 48px 40px; }
  .lc-home .foot-col h5 { font-size: 13px; font-weight: 700; margin-bottom: 16px; color: var(--lm-ink); }
  .lc-home .foot-col a { display: block; font-size: 13px; color: var(--lm-ink-soft); margin-bottom: 12px; }
  .lc-home .foot-col a:hover { color: var(--lm-ink); }
  .lc-home .foot-bottom { border-top: 1px solid var(--lm-border); padding: 22px 48px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--lm-ink-soft); }
  .lc-home .foot-bottom .links { display: flex; gap: 20px; align-items: center; }
  .lc-home .foot-bottom a { color: var(--lm-ink-soft); font-size: 12px; }

  /* Écrans intermédiaires : la recherche compacte disparaît, grilles resserrées */
  @media (max-width: 1180px) {
    .lc-home .hd-search-compact { display: none; }
    .lc-home .dest-grid { grid-template-columns: repeat(3, 1fr); }
    .lc-home .listing-grid { grid-template-columns: repeat(3, 1fr); }
    .lc-home .wrap { padding: 0 28px; }
  }
}

/* ============================================================
   RÉSULTATS / VOIR TOUT DESKTOP EXACT (« Voir Tout Desktop.html »)
   ============================================================ */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:has(.lc-vt) .sr { display: none !important; }
  .lc-vt { display: block; font-family: "Manrope", system-ui, sans-serif; }
  .lc-vt .wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }
  .lc-vt { overflow-x: hidden; }
  .lc-vt .results-layout { min-width: 0; }

  /* Filter bar */
  .lc-vt .filter-bar { border-bottom: 1px solid var(--lm-border); background: var(--lm-surface); }
  .lc-vt .filter-row { display: flex; align-items: center; gap: 10px; padding: 16px 0; overflow-x: auto; }
  .lc-vt .filter-chip { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--lm-border); background: var(--lm-surface); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--lm-ink); text-decoration: none; }
  .lc-vt .filter-chip:hover { border-color: var(--lm-border-strong); text-decoration: none; }
  .lc-vt .filter-chip.active { background: var(--lm-ink); color: #fff; border-color: var(--lm-ink); }
  .lc-vt .filter-sep { width: 1px; height: 24px; background: var(--lm-border); margin: 0 4px; flex-shrink: 0; }

  /* Results head */
  .lc-vt .results-head { padding: 28px 0 4px; }
  .lc-vt .results-head h1 { font-weight: 800; font-size: 24px; letter-spacing: -.01em; margin-bottom: 4px; color: var(--lm-ink); }
  .lc-vt .results-head p { font-size: 14px; color: var(--lm-ink-soft); }

  /* Layout Airbnb : cartes à gauche + carte géo collante à droite */
  /* Liste à gauche, carte réellement fixe à droite : la carte ne bouge pas
     d'un pixel pendant le défilement des résultats (position: fixed, pas
     sticky, qui restait dépendante de la hauteur du conteneur). */
  /* Annonces à gauche, carte à droite. La carte est collante : elle ne bouge
     pas tant qu'on défile dans la section des annonces, puis la page reprend
     son défilement normal une fois la section dépassée (pied de page compris). */
  .lc-vt { --lc-map-w: clamp(320px, 34vw, 620px); }
  .lc-vt .results-layout {
    display: grid; grid-template-columns: 1fr var(--lc-map-w);
    gap: 32px; align-items: stretch; padding-bottom: 64px; min-width: 0;
  }
  .lc-vt .results-main { min-width: 0; }
  /* Gabarit : réserve la colonne de droite. La carte y est posée en absolu
     tant que le JS n'a pas mesuré (aucun risque de carte invisible). */
  /* Le gabarit couvre toute la hauteur de la liste : c'est lui qui définit
     la zone où la carte a le droit de rester affichée. */
  .lc-vt .map-panel { position: relative; min-height: calc(100vh - 128px); background: transparent; border: none; }
  .lc-vt .map-float {
    position: absolute; inset: 0;
    border-radius: var(--lm-radius-lg); overflow: hidden;
    border: 1px solid var(--lm-border); background: var(--lm-surface-alt);
    box-shadow: var(--lm-shadow-lg);
  }
  .lc-vt .map-float > #lc-vt-map { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* Mesuré : la carte est ancrée à la fenêtre et ne défile plus du tout.
     Ses dimensions ne sont recalculées qu'au redimensionnement, jamais au
     défilement — Google Maps se vidait quand on les changeait en continu. */
  .lc-vt .map-panel.is-floating > .map-float { position: fixed; inset: auto; }
  /* Section des annonces quittée : on efface la carte au lieu de la laisser
     passer sur le pied de page. */
  .lc-vt .map-panel.is-off > .map-float { visibility: hidden; }
  .lc-vt .lc-map-label { background: #fff; border-radius: 999px; padding: 2px 6px; }
  /* Écrans étroits : la carte passe sous la liste plutôt que de la comprimer */
  @media (max-width: 1199px) {
    .lc-vt .results-layout { grid-template-columns: 1fr; }
    .lc-vt .map-panel { position: relative; width: 100%; height: 360px; margin: 0 0 24px; }
    .lc-vt .map-float { position: absolute !important; inset: 0 !important; visibility: visible !important; }
  }

  /* Cartes style Airbnb — 2 colonnes avec carte visible */
  .lc-vt .listing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; padding: 28px 0 64px;
    min-width: 0;
  }
  .lc-vt .listing-grid > * { min-width: 0; }
  /* Carte sous la liste : 2 colonnes, sinon les cartes seraient écrasées */
  @media (max-width: 1199px) { .lc-vt .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .lc-vt .listing-card { cursor: pointer; text-decoration: none; color: #222; }
  .lc-vt .listing-card:hover { text-decoration: none; }
  .lc-vt .listing-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; background: var(--lm-surface-alt); margin-bottom: 10px; }
  .lc-vt .listing-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
  .lc-vt .listing-card:hover .listing-img img { transform: scale(1.03); }
  .lc-vt .listing-chip { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.18); color: #222; }
  .lc-vt .listing-like { position: absolute; top: 12px; right: 12px; z-index: 2; line-height: 0; }
  .lc-vt .listing-like svg { transition: transform .15s; }
  .lc-vt .listing-card:hover .listing-like svg { transform: scale(1.1); }
  .lc-vt .listing-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
  .lc-vt .listing-top h4 { font-size: 15px; font-weight: 600; color: #222; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .lc-vt .listing-rating { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; flex-shrink: 0; color: #222; }
  .lc-vt .listing-loc { font-size: 14px; color: #717171; margin-bottom: 5px; }
  .lc-vt .listing-price { font-size: 15px; color: #222; }
  .lc-vt .listing-price b { font-weight: 600; }
  .lc-vt .listing-price .suf { color: #717171; font-weight: 400; }
}

/* Large desktop : conteneur plus large */
@media (min-width: 1440px) {
  :root { --max-width: 1280px; }
  .app-shell, .page-wrap, .page-content, .content, .page { max-width: 1280px !important; }
  .rec-inner { grid-template-columns: repeat(5, 1fr) !important; }
  .lc-dfoot__cols, .lc-dfoot__bottom { max-width: 1280px; }
}


/* ============================================================
   TACTILE — pas de survol persistant sur écran sans souris.
   Sans ça, un appui sur une carte laissait la surbrillance collée.
   ============================================================ */
@media (hover: none) {
  .lc-vt .listing-card:hover .listing-img img { transform: none; }
  .lc-vt .listing-card:hover .listing-like svg { transform: none; }
  .listing-card--hover { transform: none; }
  .listing-card--hover .listing-img { box-shadow: none; }
  .listing-card--hover .listing-price b,
  .listing-card--hover h4 { text-decoration: none; color: inherit; }
  .gmap-imgpin--hover {
    background: #fff; color: #111; border-color: rgba(0,0,0,.08);
    transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,.22);
  }
  .gmap-imgpin--active.gmap-imgpin--hover {
    background: #D52B1E; color: #fff; border-color: #D52B1E;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ============================================================
   DESKTOP — pages internes (hors accueil / annonce / résultats)

   Tous les gabarits internes sont des maquettes téléphone : un
   conteneur `max-width:480px`, une barre d'action `position:fixed`
   large de 480px, des en-têtes `position:sticky; top:0` et souvent
   `height:100dvh; overflow:hidden`. Posés sous l'en-tête desktop fixe
   (84px), ils s'affichent en bande étroite au centre de l'écran et se
   font couper en haut.

   Ce bloc élargit ces conteneurs, recale les éléments collants sous
   l'en-tête et redonne aux barres d'action la largeur du contenu.
   Aucune règle ne touche l'accueil, la page annonce ni la recherche,
   qui ont déjà leur rendu desktop dédié.
   ============================================================ */
@media (min-width: 768px) {

  /* ── 1. Authentification : connexion + inscription ──
     `.rp` sert aussi au signalement d'annonce : on ne vise que la
     variante qui porte un visuel d'en-tête. */
  html:has(.lp), body:has(.lp),
  html:has(.rp__hero), body:has(.rp__hero) { height: auto !important; overflow: visible !important; }
  body:has(.lp), body:has(.rp__hero) { display: block !important; }

  .lp, .rp:has(.rp__hero) {
    max-width: 980px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 56px auto 88px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--lm-surface) !important;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-lg);
    overflow: hidden !important;
  }
  /* Visuel collant : le formulaire d'inscription est long, l'image reste. */
  .lp__hero, .rp__hero {
    flex: none !important;
    height: 100% !important;
    min-height: 100%;
    border-radius: 0 !important;
    position: sticky;
    top: 0;
    align-self: start;
  }
  .lp__hero-title, .rp__hero-title {
    bottom: 32px !important; left: 32px !important; right: 32px !important;
    font-size: 30px !important; line-height: 1.2 !important;
  }
  .lp__hero-lang, .rp__hero-lang { top: 20px !important; right: 20px !important; }
  .lp__body, .rp:has(.rp__hero) .rp__body {
    margin-top: 0 !important;
    border-radius: 0 !important;
    padding: 48px 44px !important;
    overflow: visible !important;
    justify-content: center;
  }
  .lp__heading { font-size: 26px !important; margin-bottom: 24px !important; }
  .lp__legal, .rp:has(.rp__hero) .rp__legal { margin-top: 28px !important; }

  @media (max-width: 900px) {
    .lp, .rp:has(.rp__hero) { grid-template-columns: 1fr; max-width: 520px !important; }
    .lp__hero, .rp__hero { min-height: 200px; position: static; }
  }

  /* ── 2. Écrans-formulaires : tunnels de réservation et de publication ──
     Une colonne lisible, centrée, posée sur une carte. */
  .al, .hpx, .pf, .hv, .rdp, .rr, .rc, .la, .vp, .cf, .bs, .hr,
  .rp:not(:has(.rp__hero)) {
    max-width: 720px !important;
    width: 100% !important;
    margin: 40px auto 132px !important;
    min-height: 0 !important;
    height: auto !important;
    background: var(--lm-surface) !important;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-sm);
    overflow: visible !important;
  }

  /* ── 3. Écrans-tableaux de bord : profils, annonces, versements, messages ── */
  /* `.ph` sert aussi de vignette d'attente sur l'accueil mobile : on ne
     vise que le profil hôte, reconnaissable à son menu. */
  .ph:has(.ph__menu), .gp, .pgp, .hl, .hs, .hls, .po, .hpr, .hd, .vg, .mp,
  .cv, .notif, .pay-wrap, .fp {
    max-width: 1080px !important;
    width: 100% !important;
    margin: 24px auto 80px !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* Profil hôte : deux colonnes de menu, sinon les lignes s'étirent sur
     toute la largeur avec le chevron perdu à droite. */
  .ph:has(.ph__menu) { max-width: 960px !important; }
  .ph__head, .ph__stats, .ph__menu, .ph__section-title, .ph__switch {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .ph__switch { width: 100% !important; padding: 16px !important; }
  .ph__menu { display: grid !important; grid-template-columns: 1fr 1fr; }
  .ph__menu .ph__item { border-bottom: 1px solid #F5F5F3 !important; }
  .ph__menu .ph__item:nth-child(odd) { border-right: 1px solid #F5F5F3; }

  /* Mes annonces : grille deux colonnes, bouton flottant collé au conteneur. */
  .hl__list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px;
              padding-left: 0 !important; padding-right: 0 !important; }
  .hl__list > * { margin: 0 !important; }
  .hl__head, .hl__count { padding-left: 0 !important; padding-right: 0 !important; }
  .hl__fab { right: calc(50vw - 540px) !important; bottom: 32px !important; }

  /* ── 4. En-têtes collants : sous l'en-tête desktop, pas derrière ── */
  .ph__head, .gp__head, .hl__head, .hs__head, .hls__head, .po__head,
  .hpr__head, .hd__head, .vg__head, .mp__head, .cv__head, .notif__head,
  .al__head, .hv__head, .rdp__head, .rr__head, .rc__head, .pf__head,
  .hpx__head, .bs__head, .fp__head {
    top: 84px !important;
    padding-top: 16px !important;
    border-radius: var(--lm-radius) var(--lm-radius) 0 0;
  }

  /* ── 5. Barres d'action fixes : alignées sur la carte, pas 480px ──
     Elles restent fixes (le tunnel garde son bouton toujours visible),
     mais reprennent la largeur du contenu et son arrondi. */
  .al__footer, .hpx__footer, .pf__footer, .hv__footer, .rdp__footer,
  .rr__footer, .rc__footer, .la__footer, .vp__footer, .rp__footer,
  .cf__footer, .bs__footer {
    max-width: 720px !important;
    border: 1px solid var(--lm-border);
    border-bottom: none;
    border-radius: var(--lm-radius-lg) var(--lm-radius-lg) 0 0;
    box-shadow: 0 -8px 28px rgba(10, 10, 10, .10);
    padding: 16px 24px 18px !important;
  }

  /* ── 6. Feuilles glissantes (sheets) : même mécanique, largeur fenêtre ──
     On ne touche pas aux transformations d'ouverture (translateX + translateY),
     seulement à la largeur : une feuille de 480px au ras d'un écran 1920
     ressemble à un téléphone posé au milieu de la page. */
  .gp__edit-sheet, .hd__pick-sheet, .hls__pick-sheet, .ph__vi-sheet {
    max-width: 560px !important;
    border-radius: var(--lm-radius-lg) var(--lm-radius-lg) 0 0 !important;
    max-height: 82vh !important;
  }

  /* ── 7. Navigation ──
     Voyageur : aucune barre d'onglets sur desktop, comme sur Airbnb — la nav
     mobile reste masquée et tout passe par le menu de compte de l'en-tête.
     Hôte : la barre du bas se redresse en colonne de gauche, façon tableau de
     bord. On reconnaît une page hôte à sa nav pointant vers /host-…, en
     excluant explicitement les gabarits voyageur qui embarquent la même nav. */
  body:not(:has(.lc-home)):not(:has(.lc-pdp)):not(:has(> .gp)):not(:has(> .vg)):not(:has(> .fp)):not(:has(> .notif)):not(:has(> .pay-wrap)):not(:has(> .mp)):not(:has(> .cv)):not(:has(> .lp)):not(:has(> .rp)):not(:has(> .sr)):not(:has(.dh-sticky)):has(:is(.bottom-nav,.h-nav,.g-nav) a[href*="/host-"]) {
    padding-top: 84px !important;
    padding-left: 248px !important;
  }
  body:not(:has(.lc-home)):not(:has(.lc-pdp)):not(:has(> .gp)):not(:has(> .vg)):not(:has(> .fp)):not(:has(> .notif)):not(:has(> .pay-wrap)):not(:has(> .mp)):not(:has(> .cv)):not(:has(> .lp)):not(:has(> .rp)):not(:has(> .sr)):not(:has(.dh-sticky)):has(:is(.bottom-nav,.h-nav,.g-nav) a[href*="/host-"]) :is(.bottom-nav, .bottom-nav--host, .h-nav, .g-nav) {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 84px !important;
    bottom: auto !important;
    height: calc(100vh - 84px) !important;
    width: 248px !important;
    max-width: none !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    background: var(--lm-surface) !important;
    border: none !important;
    border-right: 1px solid var(--lm-border) !important;
    border-radius: 0 !important;
    padding: 20px 12px !important;
    z-index: 80 !important;
    box-shadow: none !important;
  }
  body:not(:has(.lc-home)):not(:has(.lc-pdp)):not(:has(> .gp)):not(:has(> .vg)):not(:has(> .fp)):not(:has(> .notif)):not(:has(> .pay-wrap)):not(:has(> .mp)):not(:has(> .cv)):not(:has(> .lp)):not(:has(> .rp)):not(:has(> .sr)):not(:has(.dh-sticky)):has(:is(.bottom-nav,.h-nav,.g-nav) a[href*="/host-"]) :is(.bottom-nav__item, .h-nav a, .g-nav a) {
    flex: none !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  body:not(:has(.lc-home)):not(:has(.lc-pdp)):not(:has(> .gp)):not(:has(> .vg)):not(:has(> .fp)):not(:has(> .notif)):not(:has(> .pay-wrap)):not(:has(> .mp)):not(:has(> .cv)):not(:has(> .lp)):not(:has(> .rp)):not(:has(> .sr)):not(:has(.dh-sticky)):has(:is(.bottom-nav,.h-nav,.g-nav) a[href*="/host-"]) :is(.bottom-nav__item.active, .h-nav a.active, .g-nav a.active) {
    background: var(--lm-surface-alt) !important;
  }
  body:not(:has(.lc-home)):not(:has(.lc-pdp)):not(:has(> .gp)):not(:has(> .vg)):not(:has(> .fp)):not(:has(> .notif)):not(:has(> .pay-wrap)):not(:has(> .mp)):not(:has(> .cv)):not(:has(> .lp)):not(:has(> .rp)):not(:has(> .sr)):not(:has(.dh-sticky)):has(:is(.bottom-nav,.h-nav,.g-nav) a[href*="/host-"]) :is(.bottom-nav__item, .h-nav a, .g-nav a) svg {
    width: 20px !important; height: 20px !important;
  }
  body:not(:has(.lc-home)):not(:has(.lc-pdp)):not(:has(> .gp)):not(:has(> .vg)):not(:has(> .fp)):not(:has(> .notif)):not(:has(> .pay-wrap)):not(:has(> .mp)):not(:has(> .cv)):not(:has(> .lp)):not(:has(> .rp)):not(:has(> .sr)):not(:has(.dh-sticky)):has(:is(.bottom-nav,.h-nav,.g-nav) a[href*="/host-"]) .nb-badge { position: static !important; margin-left: auto !important; }

  /* ── 8. Tiroir latéral hôte ──
     Le gabarit le recentre sur le shell 480px (`left: calc(50% - 240px)`) :
     fermé, il retombe en plein milieu de l'écran sur desktop. */
  .sd-drawer { left: 0 !important; }
}

/* ── Menu de compte desktop (façon Airbnb) ──
   Pilule hamburger + avatar dans l'en-tête, menu déroulant au clic.
   Remplace le simple lien « Mon compte » : côté voyageur c'est la seule
   navigation, la barre d'onglets mobile restant masquée sur desktop. */
@media (min-width: 768px) {
  .lc-dacct { position: relative; }
  .lc-dacct__btn {
    display: flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 6px 0 12px;
    background: var(--lm-surface); color: var(--lm-ink);
    border: 1px solid var(--lm-border); border-radius: 999px;
    cursor: pointer; transition: box-shadow .2s;
  }
  .lc-dacct__btn:hover { box-shadow: var(--lm-shadow-sm); }
  .lc-dacct__avatar, .lc-dacct__btn img {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block;
  }
  .lc-dacct__menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 260px; padding: 8px 0;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border); border-radius: var(--lm-radius);
    box-shadow: var(--lm-shadow-lg); z-index: 950;
  }
  .lc-dacct__menu[hidden] { display: none; }
  .lc-dacct__menu a {
    display: block; padding: 11px 18px;
    font-size: 14px; font-weight: 500; color: var(--lm-ink); text-decoration: none;
  }
  .lc-dacct__menu a:hover { background: var(--lm-surface-alt); color: var(--lm-ink); }
  .lc-dacct__sep { display: block; height: 1px; margin: 8px 0; background: var(--lm-border); }
}

/* ── Gabarits qui contraignent <body> lui-même (tunnel de paiement) ──
   Certains templates posent un max-width sur body : sans marge auto, toute
   la page se colle au bord gauche sur grand écran. */
@media (min-width: 768px) {
  body { margin-left: auto !important; margin-right: auto !important; }
}

/* ── Conversation : présentation façon WhatsApp Web ──
   Deux panneaux dans un cadre pleine hauteur : liste des fils à gauche,
   fil actif à droite avec en-tête fixe, messages qui défilent seuls et
   zone de saisie ancrée en bas. Le gabarit mobile reste intact (.cv-shell
   est neutralisé en display:contents sous 768px). */
@media (min-width: 768px) {
  /* Le gabarit mobile met <body> en flex colonne pleine hauteur : le cadre
     s'y faisait écraser par flex-shrink. On repasse la page en flux normal. */
  html:has(.cv-shell), body:has(.cv-shell) {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .cv-shell {
    flex: none !important;
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr);
    width: 100%;
    max-width: 1180px;
    height: calc(100vh - 84px - 48px);
    margin: 24px auto 40px !important;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-sm);
    overflow: hidden;
  }

  /* Panneau gauche */
  .cv-side {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--lm-border);
    background: var(--lm-surface);
  }
  .cv-side__head {
    padding: 20px 20px 14px;
    font-size: 18px; font-weight: 800; color: var(--lm-ink);
    border-bottom: 1px solid var(--lm-border);
  }
  .cv-side__list { flex: 1; overflow-y: auto; }
  .cv-side__item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    text-decoration: none; color: var(--lm-ink);
    border-bottom: 1px solid var(--lm-surface-alt);
  }
  .cv-side__item:hover { background: var(--lm-surface-alt); color: var(--lm-ink); }
  .cv-side__item--on  { background: var(--lm-surface-muted); }
  .cv-side__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 16px; overflow: hidden;
  }
  .cv-side__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .cv-side__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .cv-side__name    { font-size: 14px; font-weight: 700; }
  .cv-side__listing { font-size: 11px; color: var(--lm-ink-faint); }
  .cv-side__name, .cv-side__listing, .cv-side__preview {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cv-side__preview { font-size: 12px; color: var(--lm-ink-soft); margin-top: 2px; }
  .cv-side__badge {
    flex-shrink: 0; min-width: 20px; height: 20px; border-radius: 999px;
    background: var(--lm-accent); color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 6px;
  }

  /* Panneau droit : le fil occupe toute la hauteur du cadre */
  .cv-shell .cv {
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #F5F5F3 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
  }
  .cv-shell .cv__head {
    top: auto !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
  }
  .cv-shell .cv__back { display: none; }      /* la liste remplace le retour */
  .cv-shell .cv__messages { flex: 1; min-height: 0; padding: 16px 24px 12px; }
  .cv-shell .cv__input-wrap { padding: 14px 20px !important; }

  /* Boîte de réception : même cadre, liste à gauche, panneau d'attente à droite. */
  .cv-shell--inbox { grid-template-columns: 340px minmax(0, 1fr); }
  .cv-shell--inbox > .mp,
  .cv-shell--inbox > .page {
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-right: 1px solid var(--lm-border);
    background: var(--lm-surface) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column;
  }
  .cv-shell--inbox .mp__head,
  .cv-shell--inbox .hm__head {
    top: 0 !important;
    padding: 18px 20px 14px !important;
    background: var(--lm-surface) !important;
    border-bottom: 1px solid var(--lm-border);
    border-radius: 0 !important;
  }
  .cv-shell--inbox .hm__back { display: none; }
  .cv-shell--inbox .mp__list { border-radius: 0 !important; }
  .cv-shell--inbox .mp__search { padding: 12px 16px !important; }

  .cv-empty {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px;
    text-align: center;
    background: #F5F5F3;
  }
  .cv-empty__icon  { font-size: 42px; }
  .cv-empty__title { font-size: 18px; font-weight: 800; color: var(--lm-ink); }
  .cv-empty__sub   { font-size: 14px; color: var(--lm-ink-soft); max-width: 320px; line-height: 1.5; }

  /* Panneau droit : la conversation est chargée dans une iframe pour garder
     son composeur et ses scripts intacts, sans dupliquer le gabarit. */
  .cv-shell--inbox { grid-template-areas: 'list thread'; }
  .cv-shell--inbox > .mp,
  .cv-shell--inbox > .page { grid-area: list; }
  .cv-empty, .cv-frame     { grid-area: thread; }
  .cv-frame {
    display: none;
    width: 100%; height: 100%;
    border: 0; background: #F5F5F3;
  }
  body.cv-has-thread .cv-frame { display: block !important; }
  body.cv-has-thread .cv-empty { display: none !important; }

  /* Élément de liste actif */
  .cv-shell--inbox .is-current { background: var(--lm-surface-muted) !important; }

  /* Conversation affichée dans l'iframe : ni liste latérale, ni cadre. */
  .cv-shell--embed {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .cv-shell--embed .cv-side { display: none !important; }
  body:has(.cv-shell--embed) { padding: 0 !important; }
  body:has(.cv-shell--embed) .lc-dnav,
  body:has(.cv-shell--embed) .lc-dfoot { display: none !important; }
}