/* Pages de résultats du thème agency : présentation commune (barre de résultats, tri, bloc de filtres, cartes).
   Complète tl-filters.css (fenêtre mobile). Couleur : var(--main-color). */

/* ── Barre de résultats : nombre + tri ─────────────────────────────────────────────────────────── */
.tl-results-bar{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px; border: 1px solid #e8eaef; border-radius: 14px; background: #fff;
}
.tl-results-count{ margin: 0; font-size: 15px; font-weight: 700; color: #1f2633; }
.tl-results-count__suffix{ font-weight: 500; color: #6b7280; }
.tl-results-count:empty{ display: none; }
.tl-results-bar:has(.tl-results-count:empty):not(:has(select)){ display: none; }
.tl-results-sort{ display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #6b7280; font-weight: 600; }
.tl-results-sort select{
  border: 1px solid #e3e6ec; border-radius: 10px; padding: 8px 30px 8px 12px; background-color: #fff; color: #1f2633;
  font: inherit; font-weight: 600; cursor: pointer;
}
.tl-results-sort select:focus-visible{ outline: 2px solid var(--main-color, #e8483b); outline-offset: 2px; }
.tl-results-empty{
  margin: 0 0 16px; padding: 18px; border: 1px dashed #d6dae2; border-radius: 14px; background: #fafbfc;
  color: #4b5363; text-align: center;
}
.tl-results-empty[hidden]{ display: none; }
@media (max-width: 575px){
  .tl-results-bar{ padding: 10px 12px; }
  .tl-results-sort{ width: 100%; justify-content: space-between; }
  .tl-results-sort select{ flex: 1; }
}

/* ── Bloc de filtres (bureau) : même présentation sur toutes les pages ──────────────────────────── */
@media (min-width: 992px){
  /* Bloc dans le flux de la page : pas de défilement interne (barres de défilement verticale et horizontale) */
  .tl-filters{ align-self: flex-start; min-width: 0; }
}
.tl-filters #wrap{ background: #fff; border: 1px solid #e8eaef; border-radius: 16px; box-shadow: none !important; }
.tl-filters .content{ padding: 18px !important; }
.tl-filters h3, .tl-filters h4, .tl-filters h5, .tl-filters .trl-sidebar-title, .tl-filters .trl-filter-title{
  font-size: 15px !important; font-weight: 800 !important; color: #1f2633; margin: 0 0 10px !important; letter-spacing: 0;
}
.tl-filters label{ font-size: 14px; color: #374151; }
.tl-filters input[type="checkbox"], .tl-filters input[type="radio"]{ accent-color: var(--main-color, #e8483b); }
.tl-filters .custom-control{ padding-top: 3px; padding-bottom: 3px; }
.tl-filters .custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--main-color, #e8483b) !important; border-color: var(--main-color, #e8483b) !important;
}
.tl-filters .custom-control-input:focus ~ .custom-control-label::before{ box-shadow: 0 0 0 3px rgba(232, 72, 59, .18); }
.tl-filters .irs-bar, .tl-filters .irs-bar-edge, .tl-filters .irs-from, .tl-filters .irs-to, .tl-filters .irs-single{
  background: var(--main-color, #e8483b) !important; border-color: var(--main-color, #e8483b) !important;
}
.tl-filters .irs-slider, .tl-filters .irs-handle{ border-color: var(--main-color, #e8483b) !important; }
.tl-filters input[type="text"]{ border-radius: 10px; }

/* ── Cartes de résultats : relief commun ───────────────────────────────────────────────────────── */
.tl-result-card, .trs-card, .trl-card, .searchresults_item.item-search, .volFilter > .max-w-6xl{
  transition: box-shadow .15s ease, transform .15s ease;
}
.tl-result-card:hover, .searchresults_item.item-search:hover, .volFilter > .max-w-6xl:hover{
  box-shadow: 0 10px 28px rgba(15, 23, 42, .10) !important;
}
@media (prefers-reduced-motion: reduce){
  .tl-result-card, .trs-card, .trl-card, .searchresults_item.item-search{ transition: none; }
}
/* Activités : image et prix alignés, bouton pleine largeur sur mobile */
.tl-result-card img{ display: block; }
@media (max-width: 767px){
  .tl-result-card .md\:w-1\/4{ flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 12px; }
  .tl-result-card .btn--primary--block{ white-space: nowrap; }
}

/* ── Hôtels : affichage en grille (setHotelView) ─────────────────────────────────────────────────
   Carte verticale : photo, informations, puis prix et bouton alignés en bas de chaque carte. */
#hotel-results[hidden], #hotel-results-more[hidden]{ display: none !important; }
#hotel-results.is-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#hotel-results.is-grid > *{ margin: 0 !important; }
#hotel-results.is-grid .hotel-item-search-list{
  display: flex; flex-direction: column; height: 100%; padding: 0 !important; overflow: hidden;
  border: 1px solid #e8eaef; border-radius: 16px;
}
#hotel-results.is-grid .cv-hotel-row{ display: flex !important; flex-direction: column; flex: 1; gap: 0; }
#hotel-results.is-grid .cv-hotel-image{ width: 100% !important; height: 210px; flex: none; position: relative; overflow: hidden; }
#hotel-results.is-grid .cv-hotel-image a{ display: block; height: 100%; }
#hotel-results.is-grid .cv-hotel-image img{
  width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; transition: transform .3s ease;
}
#hotel-results.is-grid .hotel-item-search-list:hover .cv-hotel-image img{ transform: scale(1.04); }
#hotel-results.is-grid .cv-hotel-row .img-card-deal{ position: absolute; top: 0; left: 0; z-index: 1; }
#hotel-results.is-grid .cv-hotel-info{ flex: 1; padding: 14px 16px 0; }
#hotel-results.is-grid .cv-hotel-title{ font-size: 16px; }
#hotel-results.is-grid .cv-hotel-desc, #hotel-results.is-grid .hotel-options-icons{ display: none; }
#hotel-results.is-grid .cv-hotel-pricebox{
  display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: auto; padding: 12px 16px 16px; border-left: 0; border-top: 1px solid #eef0f4; text-align: left;
}
#hotel-results.is-grid .cv-hotel-pricebox > .col{ flex: 0 1 auto; max-width: none; }
#hotel-results.is-grid .cv-hotel-pricebox .price_list_item{ margin: 0; }
#hotel-results.is-grid .cv-hotel-pricebox .price-item,
#hotel-results.is-grid .cv-hotel-pricebox .text-3xl{ font-size: 22px !important; line-height: 1.1; }
@media (prefers-reduced-motion: reduce){ #hotel-results.is-grid .cv-hotel-image img{ transition: none; } }
@media (max-width: 767px){
  #hotel-results.is-grid{ grid-template-columns: minmax(0, 1fr); }
  #view-grid-btn{ display: none !important; } /* une seule colonne sur téléphone : liste ou carte */
}
.cv-view-btn.is-active{ background: var(--main-color, #e8483b) !important; border-color: var(--main-color, #e8483b) !important; color: #fff !important; }

/* ── Hôtels : carte (Leaflet) ──────────────────────────────────────────────────────────────────── */
.tl-hmap[hidden]{ display: none !important; }
#hotels-map{ height: min(72vh, 680px); min-height: 420px; border: 1px solid #e8eaef; border-radius: 16px; overflow: hidden; z-index: 0; }
.tl-hmap__note{ margin: 10px 0 0; font-size: 13px; color: #6b7280; }
.tl-hmap__note[hidden]{ display: none; }
/* Repère : prix dans une bulle, pointe sur l'emplacement de l'hôtel */
.tl-hmap-pin{ background: none; border: 0; }
.tl-hmap-pin span{
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 7px)); white-space: nowrap;
  padding: 6px 10px; border: 1px solid #e3e6ec; border-radius: 999px; background: #fff; color: #1f2633;
  font: 700 12px/1 'Open Sans', sans-serif; box-shadow: 0 2px 8px rgba(15, 23, 42, .22); cursor: pointer;
}
.tl-hmap-pin span::after{
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: inherit;
  border-right: 1px solid #e3e6ec; border-bottom: 1px solid #e3e6ec; transform: translateX(-50%) rotate(45deg);
}
.tl-hmap-pin:hover span, .tl-hmap-pin:focus span, .tl-hmap-pin.is-active span{
  background: var(--main-color, #e8483b); border-color: var(--main-color, #e8483b); color: #fff;
}
.tl-hmap-pin:hover span::after, .tl-hmap-pin:focus span::after, .tl-hmap-pin.is-active span::after{ border-color: var(--main-color, #e8483b); }
.tl-hmap-pin.is-active{ z-index: 1000 !important; }
/* Fiche de l'hôtel */
.tl-hmap-popup .leaflet-popup-content-wrapper{ padding: 0; border-radius: 14px; overflow: hidden; }
.tl-hmap-popup .leaflet-popup-content{ margin: 0; }
.tl-hmap-card__img{ display: block; width: 100%; height: 130px; object-fit: cover; background: #f2f4f7; }
.tl-hmap-card__body{ padding: 10px 14px 14px; font-family: 'Open Sans', sans-serif; }
.tl-hmap-card__name{ font-size: 14px; font-weight: 700; line-height: 1.3; color: #1f2633; }
.tl-hmap-card__stars{ font-size: 12px; color: #f59e0b; white-space: nowrap; }
.tl-hmap-card__addr{ margin-top: 2px; font-size: 12px; color: #6b7280; }
.tl-hmap-card__price{ margin-top: 6px; font-size: 18px; font-weight: 800; color: var(--main-color, #e8483b); }
.tl-hmap-card__foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.tl-hmap-card__foot .tl-hmap-card__price{ margin-top: 0; }

/* ── Hôtels : bloc budget (affiché par _hoteljs seulement si les prix diffèrent) ─────────────────── */
#hotel-price-filter[hidden]{ display: none !important; }
#hotel-price-filter .irs{ margin-top: 4px; }

/* ── Bouton « Voir plus » commun (vols) ────────────────────────────────────────────────────────── */
.tl-load-more{
  display: block; width: 100%; max-width: 320px; margin: 8px auto 0; padding: 12px 20px; border: 1px solid var(--main-color, #e8483b);
  border-radius: 12px; background: #fff; color: var(--main-color, #e8483b); font-weight: 700; cursor: pointer;
}
.tl-load-more:hover{ background: var(--main-color, #e8483b); color: #fff; }
.tl-load-more:focus-visible{ outline: 2px solid var(--main-color, #e8483b); outline-offset: 2px; }
.tl-load-more[hidden]{ display: none; }

/* ── Fil d'Ariane (partials/detail-breadcrumb) : pages de détail, liste Omra, deals… ──────────────────────
   Ici (feuille chargée sur toutes les pages) : accueil en pastille ronde, chevrons, liens surlignés au survol,
   page courante en gras tronquée. */
.tl-detail-breadcrumb{ padding: 16px 0 6px; }
.tl-breadcrumb-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.tl-breadcrumb-item{ display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; line-height: 1.4; }
.tl-breadcrumb-item a{
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px;
  color: #475569; font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.tl-breadcrumb-item a:hover, .tl-breadcrumb-item a:focus-visible{
  background: color-mix(in srgb, var(--main-color, #2563eb) 9%, #fff); color: var(--main-color, #2563eb); text-decoration: none;
}
.tl-breadcrumb-item--home a{ padding: 3px 12px 3px 3px; }
.tl-breadcrumb-home{
  display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--main-color, #2563eb) 12%, #fff); color: var(--main-color, #2563eb); font-size: 12px;
}
.tl-breadcrumb-sep{ flex: none; color: #94a3b8; }
[dir="rtl"] .tl-breadcrumb-sep{ transform: scaleX(-1); }
.tl-breadcrumb-current{
  display: inline-block; max-width: 360px; padding: 4px 4px 4px 6px; overflow: hidden; color: #0f172a; font-weight: 700;
  white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;
}
@media (max-width: 575px){
  .tl-breadcrumb-home-label{ display: none; }
  .tl-breadcrumb-item--home a{ padding: 3px; }
  .tl-breadcrumb-current{ max-width: 190px; }
}

/* ── Hôtels recommandés (contrats de l'agence) : badge, accent de carte, titres de groupe (_hoteljs) ── */
.tl-results-group{ display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; padding: 0 2px; }
.tl-results-group__title{ display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.tl-results-group--reco .tl-results-group__title i{ color: var(--main-color, #2563eb); }
.tl-results-group__sub{ font-size: .85rem; color: #64748b; }
.tl-results-group--other{ margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
#hotel-results.is-grid > .tl-results-group{ grid-column: 1 / -1; }
.tl-reco-card{ border: 1.5px solid color-mix(in srgb, var(--main-color, #2563eb) 35%, #e5e7eb) !important; }
.cv-hotel-image{ position: relative; }
.tl-reco-badge{
  position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: var(--main-color, #2563eb); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .18); pointer-events: none;
}

/* ── Liste des hôtels (vue liste) : image | infos | prix ; tablette et mobile : image + infos, prix en dessous ──
   Sélecteurs sur #hotel-results pour primer sur hotels.css, css.css et les thèmes enfants (builder.css). */
#hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-row{
  display: grid !important; grid-template-columns: 240px minmax(0, 1fr) 190px !important;
  grid-template-areas: "img info price"; gap: 18px; align-items: stretch;
}
#hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image{
  grid-area: img; width: auto !important; min-width: 0 !important; min-height: 190px; border-radius: 12px; overflow: hidden;
}
#hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image > a{ display: block; height: 100%; }
#hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image .img-search-item-card,
#hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image img{
  position: static !important; width: 100% !important; height: 100% !important; min-height: 190px !important; object-fit: cover; border-radius: 12px !important;
}
#hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-info{ grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#hotel-results .hotel-item-search-list .cv-hotel-title{
  display: block; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #0f172a; overflow-wrap: anywhere;
}
#hotel-results .hotel-item-search-list .cv-hotel-title .cv-stars{ display: inline-flex; gap: 1px; margin-inline-start: 6px; vertical-align: 2px; }
#hotel-results .hotel-item-search-list .cv-hotel-title .cv-stars i{ font-size: 11px; }
#hotel-results .hotel-item-search-list .cv-hotel-location{
  display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; line-height: 1.4; color: #64748b;
  -webkit-line-clamp: unset; overflow: visible;
}
#hotel-results .hotel-item-search-list .cv-hotel-location i{ margin-top: 3px; color: var(--main-color, #2563eb); }
#hotel-results .hotel-item-search-list .cv-hotel-tags{ display: flex !important; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
#hotel-results .hotel-item-search-list .cv-badge,
#hotel-results .hotel-item-search-list .cv-room-type{
  display: inline-flex; align-items: center; gap: 6px; width: auto !important; max-width: 100%; margin: 0; padding: 4px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.35;
}
#hotel-results .hotel-item-search-list .cv-badge{ background: #e0f2fe; color: #075985; }
#hotel-results .hotel-item-search-list .cv-room-type{ background: #f1f5f9; color: #334155; }
#hotel-results .hotel-item-search-list .cv-rate-info{ font-size: 12px; font-weight: 600; }
#hotel-results .hotel-item-search-list .cv-rate-info.is-nrf{ color: #b45309; }
#hotel-results .hotel-item-search-list .cv-rate-info.is-free{ color: #15803d; }
#hotel-results .hotel-item-search-list .cv-hotel-desc{ margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: #475569; }

/* Prix */
#hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-pricebox{
  grid-area: price; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding-inline-start: 16px; border-left: 0; border-inline-start: 1px solid #eef0f4; text-align: end;
}
#hotel-results .cv-price{ display: flex; flex-direction: column; align-items: inherit; gap: 1px; line-height: 1.2; }
#hotel-results .cv-price__old{ font-size: 12px !important; color: #dc2626 !important; text-decoration: line-through; }
#hotel-results .cv-price__main{ font-size: 15px !important; font-weight: 700; color: var(--main-color, #2563eb) !important; white-space: nowrap; }
#hotel-results .cv-price .price-item{ font-size: 24px !important; font-weight: 800 !important; color: var(--main-color, #2563eb) !important; }
#hotel-results .cv-price__nights{ font-size: 12px !important; color: #475569 !important; }
#hotel-results .cv-price .cv-tax{ font-size: 11px !important; text-transform: none; }

/* Tablette : prix sous l'image et les infos */
@media (max-width: 991px){
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-row{
    grid-template-columns: 200px minmax(0, 1fr) !important; grid-template-areas: "img info" "price price"; gap: 14px;
  }
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-pricebox{
    flex-direction: row; align-items: center; padding: 12px 0 0; border-inline-start: 0; border-top: 1px solid #eef0f4; text-align: start;
  }
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-price{ align-items: flex-start; }
}

/* Mobile : vignette étroite, titre et infos lisibles, description masquée */
@media (max-width: 767px){
  #hotel-results:not(.is-grid) .hotel-item-search-list{ padding: 12px !important; }
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-row{ grid-template-columns: 112px minmax(0, 1fr) !important; gap: 12px; }
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image{ min-height: 0; height: 150px; }
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image .img-search-item-card,
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image img{ min-height: 0 !important; height: 150px !important; }
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-image .tl-reco-badge{ bottom: 6px; inset-inline-start: 6px; padding: 3px 7px; font-size: 10px; }
  #hotel-results .hotel-item-search-list .cv-hotel-title{ font-size: 16px; }
  #hotel-results .hotel-item-search-list .cv-hotel-location{ font-size: 12px; }
  #hotel-results .hotel-item-search-list .cv-badge,
  #hotel-results .hotel-item-search-list .cv-room-type{ font-size: 11px; padding: 3px 8px; }
  #hotel-results:not(.is-grid) .hotel-item-search-list .cv-hotel-desc,
  #hotel-results:not(.is-grid) .hotel-item-search-list .hotel-options-icons{ display: none; }
  #hotel-results .cv-price .price-item{ font-size: 21px !important; }
}