/* Résultats hôtels : barre de tri (hs-) et panneau chambres & formules (hr-) */
:root {
  --hr-primary: #009aad;
  --hr-primary-soft: #e6f5f7;
  --hr-ink: #1d2433;
  --hr-muted: #667085;
  --hr-line: #e4e7ec;
  --hr-ok: #067647;
  --hr-ok-soft: #ecfdf3;
  --hr-warn: #b54708;
  --hr-warn-soft: #fffaeb;
  --hr-no: #b42318;
  --hr-no-soft: #fef3f2;
  --hr-radius: 10px;
}

/* ---------- Tri ---------- */
.hs-sort { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hs-sort-label { flex: none; font-size: 14px; font-weight: 600; }
/* position: relative : les libellés .visually-hidden (absolus) des puces restent dans la zone défilante au lieu d'élargir la page */
.hs-sort-list { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.hs-sort-list::-webkit-scrollbar { display: none; }
.hs-chip {
  position: relative; flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--hr-line); border-radius: 999px;
  background: #fff; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.hs-chip:hover { border-color: var(--hr-primary); color: var(--hr-primary); }
.hs-chip.active { background: var(--hr-ink); border-color: var(--hr-ink); color: #fff; }
.hs-chip:focus-visible { outline: 2px solid var(--hr-primary); outline-offset: 2px; }
#products { transition: opacity .2s; }
#products.is-loading { opacity: .45; pointer-events: none; }
@media (max-width: 767.98px) {
  .hs-sort { display: block; margin: 0 -12px 12px; }
  .hs-sort-label { display: block; padding: 0 12px 6px; }
  .hs-sort-list { padding: 2px 12px; }
}

/* ---------- Panneau chambres ---------- */
.hr-panel { border-top: 1px solid var(--hr-line); background: #fafbfc; }
.hr-inner { padding: 16px; }
.hr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hr-title { font-size: 15px; font-weight: 600; margin-right: auto; }

/* Formules : onglets segmentés */
.hr-tabs.boardsFilter { gap: 6px; padding: 0; flex-wrap: wrap; }
.hr-tabs .board-item { margin: 0 !important; padding: 0 !important; }
.hr-tab {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--hr-line); border-radius: 999px;
  background: #fff; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.hr-tab:hover { border-color: var(--hr-primary); color: var(--hr-primary); }
.btn-check:checked + .hr-tab { background: var(--hr-primary-soft); border-color: var(--hr-primary); color: var(--hr-primary); font-weight: 600; }
.btn-check:focus-visible + .hr-tab { outline: 2px solid var(--hr-primary); outline-offset: 2px; }

/* Ligne de chambre */
.hotelsRooms .hr-room {
  margin: 0 0 8px; padding: 12px 16px; background: #fff; border: 1px solid var(--hr-line); border-radius: var(--hr-radius);
  transition: border-color .15s, box-shadow .15s;
}
.hotelsRooms .hr-room:hover { border-color: #c9d3df; }
.hotelsRooms .hr-room.selectedRow { background: #fff; border-color: var(--hr-primary) !important; box-shadow: 0 0 0 1px var(--hr-primary); }
.hotelsRooms .hr-room.border-primary { border-width: 1px !important; }
.hr-room-info { padding-right: 12px; }
.hr-room-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hr-qty { font-weight: 500; }
.hr-room-pax { font-size: 13px; margin-top: 2px; }
.hr-room-conds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hr-room-conds:empty { display: none; }
.hr-cond { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: #f2f4f7; }
.hr-cond--ok { background: var(--hr-ok-soft); color: var(--hr-ok); }
.hr-cond--nrf { background: var(--hr-no-soft); color: var(--hr-no); }

.hr-room .price-box, .room-card.selectedRow .hr-room-price .price-box {
  border: 0; padding: 0 12px; background: none !important; color: inherit;
}
.hr-board { font-size: 12px; }
.hr-old { font-size: 12px; text-decoration: line-through; }
.hr-amount { font-size: 18px; font-weight: 600; line-height: 1.2; }
.hr-amount small { font-size: 12px; font-weight: 600; }

.hr-room-select { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hr-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.hr-badge--ok { background: var(--hr-ok-soft); color: var(--hr-ok); }
.hr-badge--req { background: var(--hr-warn-soft); color: var(--hr-warn); }
.hr-badge--no { background: var(--hr-no-soft); color: var(--hr-no); }
.hr-check.form-check { position: relative; margin: 0; padding: 0; min-height: 0; }
.hr-check .form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hr-check .form-check-label {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 112px; height: 38px; padding: 0 14px;
  border: 1px solid var(--hr-primary); border-radius: 8px; color: var(--hr-primary); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
}
.hr-check .form-check-label:hover { background: var(--hr-primary-soft); }
.hr-check .form-check-input:checked + .form-check-label { background: var(--hr-primary); color: #fff; }
.hr-check .form-check-input:checked + .form-check-label::before { content: "✓"; }
.hr-check .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--hr-primary); outline-offset: 2px; }

.hr-more {
  border: 0; background: none; color: var(--hr-primary); font-size: 14px; font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.hr-more:hover { text-decoration: underline; }

/* Pied : total + réservation */
.hotelsRooms .hr-footer { align-items: center; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hr-line); }
.hr-total { text-align: right; font-size: 14px; }
.hr-total .fs-5 { font-weight: 600; }
.hr-footer .book { min-width: 140px; height: 44px; }

@media (max-width: 767.98px) {
  .hr-inner { padding: 12px; }
  .hr-tabs.boardsFilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .hotelsRooms .hr-room { padding: 12px; }
  .hr-room-info { padding: 0 0 10px; }
  .hr-room .price-box { padding: 0; }
  .hr-check .form-check-label { min-width: 96px; }
  .hr-total { text-align: left; }
  .hotelsRooms .hr-footer { flex-wrap: nowrap; }
}

/* Fiche hôtel : le panneau est déjà dans la carte « Tarifs & Réservation » */
.hr-panel--fiche { border-top: 0; background: none; margin-top: 16px; }
.hr-panel--fiche .hr-head { margin-bottom: 12px; }