/* ============================================================
   HostSejour — Palier TABLETTE (481px et plus, écran tactile)
   L'application garde exactement sa présentation mobile, mais
   les conteneurs figés à 480px s'étirent pour occuper toute la
   largeur de l'écran. Aucune règle desktop ne s'applique ici
   (desktop.css démarre à 1024px).
   ============================================================ */

@media (min-width: 481px) and (max-width: 1023px),
       (min-width: 481px) and (hover: none) and (pointer: coarse) {

  /* ── Variables de gabarit ── */
  /* !important : chaque template redéfinit ses variables dans un
     <style> inline placé après les feuilles enqueued. */
  :root {
    --max-width: 100% !important;
    --page-px:   28px !important;
    --px:        28px !important;
  }

  /* ── Racines de page (chaque template porte la sienne) ──
     Toutes étaient bloquées à max-width:480px. */
  .app-shell,
  .page-content,
  .page-wrap,
  .page,
  .al, .bs, .cf, .cv, .fp, .gp, .hd, .hl, .hls, .hpr, .hpx, .hr,
  .hs, .hv, .la, .lp, .mp, .notif, .pf, .pgp, .ph, .po, .rc, .rdp,
  .rp, .rr, .sr, .vg, .vp, .splash,
  .pay-wrap, .pay-success__inner {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Barres fixes (header, nav du bas, pieds d'action) ── */
  .top-header,
  .sticky-bar,
  .bottom-nav,
  .bottom-nav--host,
  .bottom-bar,
  .h-nav,
  .g-nav,
  .toast,
  .fab, .hl__fab,
  .hpr__head, .sr__head, .sr__chips-wrap,
  .al__footer, .hpx__footer, .hr__footer, .hv__footer, .la__footer,
  .pf__footer, .rc__footer, .rdp__footer, .rp__footer, .rr__footer,
  .sr__map.fullscreen {
    max-width: 100% !important;
  }

  /* ── Feuilles du bas / modales plein écran ──
     Elles restent ancrées en bas mais ne dépassent pas une largeur
     confortable à lire : centrées au-dessus du contenu. */
  .bottom-sheet,
  .sr__flt-sheet,
  .gp__del-modal, .gp__edit-sheet, .gp__verif-sheet,
  .ph__vi-sheet, .hd__pick-sheet, .hls__pick-sheet,
  .lm__box, .pv-box, .lc-auth-modal {
    max-width: 640px !important;
  }

  /* Barres et feuilles écrites en style inline dans les templates
     (tunnel de réservation) — la règle !important prime sur l'inline. */
  [style*="max-width:480px"] {
    max-width: 100% !important;
  }

  /* ── Le FAB « + » de la liste des annonces suit le bord droit ── */
  .hl__fab { right: 24px !important; }

  /* ── Carrousels : plus de cartes visibles, cartes plus grandes ── */
  .rec-card,
  .rec-card__img { width: 200px; }
  .rec-wrap--viewed .rec-card { width: calc((100vw - 5 * var(--px)) / 4); }
  .rec-wrap--viewed .rec-card__img { width: 100%; }

  /* ── Listes verticales de cartes : 2 colonnes ──
     Une carte pleine largeur sur 900px serait illisible. */
  .listing-list,
  .cards-list,
  .vg__list,
  .hl__list,
  .fav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }

  /* ── Résultats de recherche : 4 colonnes (2 sur mobile) ── */
  .sr__list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 16px var(--px) !important;
  }

  /* ── Grilles génériques déjà en colonnes : on en ajoute une ── */
  .categories-grid { grid-template-columns: repeat(4, 1fr); }

  /* ── Médias : une photo d'annonce ne mange pas tout l'écran ── */
  .listing-gallery,
  .lc-hero-img,
  .pdp-hero { max-height: 60vh; }
  .listing-gallery img { object-fit: cover; }
  /* Galerie de l'annonce : plus haute, l'écran est plus large */
  .gallery { height: 400px !important; }

  /* ── Cibles tactiles confortables ── */
  .btn, .chip, .list-item, .bottom-nav__item { min-height: 44px; }
}