/* ============================================================
   hotels-list.css — modèle « hotels-list » (pages-listes d'hôtels)
   Bureau : liste de cartes (2 colonnes) + carte collante à droite.
   Mobile : liste seule, bouton flottant « Carte » (carte plein écran).
   Cartes : general/hotel-card.css.
   ============================================================ */
.main-content.hlist {
    --hl-ink: #0f172a; --hl-muted: #64748b; --hl-line: #e6e8ee; --hl-soft: #f6f8fc;
    --hl-accent: var(--button-color, #2563eb); --hl-star: #f5a623;
    color: var(--hl-ink); padding-bottom: 3rem; overflow-x: clip;
}
.main-content.hlist > * { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 1.1rem; padding-right: 1.1rem; }

/* ---- en-tête ---- */
.main-content.hlist > .hlist-head { padding-top: 1.4rem; padding-bottom: .4rem; }
.hlist-crumbs ol { display: flex; flex-wrap: wrap; gap: .2rem .5rem; list-style: none; margin: 0 0 .9rem; padding: 0; font-size: .85rem; color: var(--hl-muted); }
.hlist-crumbs li + li::before { content: "›"; margin-right: .5rem; color: #94a3b8; }
.hlist-crumbs a { color: var(--hl-muted); text-decoration: none; }
.hlist-crumbs a:hover { color: var(--hl-accent); text-decoration: underline; }
.hlist-h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.15; margin: 0 0 .45rem; }
.hlist-summary { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: 1rem; color: #334155; }
.hlist-summary svg { width: 17px; height: 17px; fill: var(--hl-star); flex: 0 0 auto; }
.hlist-intro { max-width: 820px; color: #334155; line-height: 1.6; }
.hlist-intro p { margin: 0 0 .6rem; }

/* ---- barre de filtres (collante) ---- */
.main-content.hlist > .hlist-bar {
    position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem;
    padding-top: .7rem; padding-bottom: .7rem; background: #fff; box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax var(--hl-line); clip-path: inset(0 -100vmax -1px);
}
.hlist-field { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; font-weight: 600; color: var(--hl-muted); text-transform: uppercase; letter-spacing: .04em; }
.hlist-field select { min-width: 180px; padding: .5rem 2rem .5rem .75rem; border: 1px solid var(--hl-line); border-radius: 10px; background: #fff; font-size: .92rem; color: var(--hl-ink); text-transform: none; letter-spacing: 0; font-weight: 400; }
.hlist-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hlist-chip { padding: .48rem .85rem; border: 1px solid var(--hl-line); border-radius: 999px; background: #fff; font-size: .88rem; color: var(--hl-ink); cursor: pointer; }
.hlist-chip:hover { border-color: #cbd5e1; }
.hlist-chip.is-on { background: var(--hl-ink); border-color: var(--hl-ink); color: #fff; }
.hlist-sort { margin-left: auto; }

/* ---- liste + carte ---- */
.main-content.hlist > .hlist-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding-top: 1rem; }
.hlist-count { font-size: 1.05rem; font-weight: 600; margin: 0 0 .9rem; color: #334155; }
.hlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.hlist-grid .hcard[hidden] { display: none; }
.hlist-note { margin: 1rem 0 0; font-size: .8rem; color: var(--hl-muted); }
.hlist-mapcol { display: none; }
.hlist-map { width: 100%; height: 100%; min-height: 320px; border-radius: 16px; overflow: hidden; background: #e8edf3; }
@media (min-width: 1024px) {
    .main-content.hlist > .hlist-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
    .hlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hlist-mapcol { display: block; position: sticky; top: 84px; height: min(calc(100vh - 100px), 820px); align-self: start; }
    .hlist-mapbtn { display: none; }
}

/* ---- bouton carte mobile + carte plein écran ---- */
.hlist-mapbtn {
    position: fixed; left: 50%; bottom: 18px; z-index: 40; transform: translateX(-50%);
    padding: .75rem 1.3rem; border: 0; border-radius: 999px; background: var(--hl-ink); color: #fff; font-size: .95rem; font-weight: 600;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .3); cursor: pointer;
}
@media (max-width: 1023px) {
    body.hlist-map-open { overflow: hidden; }
    body.hlist-map-open .hlist-mapcol { display: block; position: fixed; inset: 0; z-index: 35; padding: 0; background: #fff; }
    body.hlist-map-open .hlist-map { border-radius: 0; height: 100%; }
}

/* ---- marqueurs Leaflet ---- */
.hlist-pin { background: none; border: 0; }
.hlist-pin span {
    display: inline-block; transform: translate(-50%, -50%); padding: .22rem .5rem; border-radius: 999px; white-space: nowrap;
    background: #fff; color: var(--hl-ink, #0f172a); font: 600 12px/1.2 Roboto, sans-serif; box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
.hlist-pin.is-active span { background: var(--hl-ink, #0f172a); color: #fff; }
.hlist-pop { width: 230px; }
.hlist-pop img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: .45rem; }
.hlist-pop a { font-weight: 700; color: #0f172a; text-decoration: none; }
.hlist-pop p { margin: .2rem 0 0 !important; color: #64748b; font-size: .82rem; }

/* ---- texte SEO repliable ---- */
.main-content.hlist > .hlist-seo { margin-top: 2.6rem; }
.hlist-seo-body { position: relative; max-width: 860px; max-height: 260px; overflow: hidden; line-height: 1.7; color: #1e293b; }
.hlist-seo-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), #f9fafb 85%); pointer-events: none; }
.hlist-seo.is-open .hlist-seo-body { max-height: none; }
.hlist-seo.is-open .hlist-seo-body::after { display: none; }
.hlist-seo-body h2 { font-size: 1.4rem; margin: 1.6rem 0 .6rem; }
.hlist-seo-body h2:first-child { margin-top: 0; }
.hlist-seo-body h3 { font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
.hlist-seo-body a { color: var(--hl-accent); }
.hlist-more { margin-top: .7rem; padding: .55rem 1.1rem; border: 1px solid var(--hl-ink); border-radius: 999px; background: #fff; color: var(--hl-ink); font-weight: 600; cursor: pointer; }

/* ---- FAQ ---- */
.main-content.hlist > .hlist-faq { margin-top: 2.6rem; }
.hlist-faq .faq-list { max-width: 860px; }
.hlist-h2 { font-size: 1.4rem; margin: 0 0 1rem; }

/* ---- groupes d'épingles (Leaflet.markercluster) aux couleurs du site ---- */
.hlist-map .marker-cluster, .hlist-map .marker-cluster div { background: rgba(15, 23, 42, .18); }
.hlist-map .marker-cluster div { background: #0f172a; color: #fff; font: 700 12px/30px Roboto, sans-serif; }