/* ============================================
   PAGE RECHERCHE DE PROGRAMMES
   ============================================ */

.programme-search-page {
  overflow-x: hidden;
}

/* --- Hero Header --- */
.programme-search-hero {
  position: relative;
  background: #1c3d50 url('/modules/custom/uqo_programs/images/recherche-programmes.webp') center center / cover no-repeat;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 3rem 1rem 2.5rem;
}

.programme-search-hero__overlay {
  display: none;
}

.programme-search-hero__content {
  position: relative;
  z-index: 1;
}

.programme-search-hero__title {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.programme-search-hero__form {
  display: flex;
}

.programme-search-hero__input-wrap {
  display: flex;
  width: 100%;
  max-width: 500px;
  position: relative;
}

.programme-search-hero__input {
  flex: 1;
  padding: 0.85rem 1rem;
  border: none;
  font-size: 0.95rem;
  outline: none;
  background: #fff;
}

.programme-search-hero__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  background: #1c6381;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.programme-search-hero__btn:hover {
  background: #155270;
}

/* --- Main Layout --- */
.programme-search-layout {
  display: flex;
  gap: 0;
  padding: 0;
  font-family: 'Switzer-Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (max-width: 768px) {
  .programme-search-layout {
    flex-direction: column;
  }
}

/* --- Sidebar Filters --- */
.programme-search-sidebar {
  flex: 0 0 260px;
  min-width: 260px;
  background-color: #dae2e5;
  padding: 1.5rem 1.25rem;
}

.programme-search-filters {
  position: sticky;
  top: 14rem;
}

/* Filter group (accordion) */
.ps-filter-group {
  margin-bottom: 0.25rem;
}

.ps-filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  margin-bottom: 0.75rem;
  background: none;
  border: none;
  border-bottom: 1px solid #000;
  font-size: 17px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  text-align: left;
}

.ps-filter-group__toggle:hover {
  color: #333;
}

/* Barre sous le titre du filtre */
.ps-filter-group__toggle[aria-expanded="true"] {
  border-bottom-color: #111;
  font-weight: 700;
}

.ps-filter-group__arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 0;
}

.ps-filter-group__arrow svg {
  display: none;
}

.ps-filter-group__arrow::after {
  content: '˅';
  font-size: 1rem;
  color: #111;
  line-height: 1;
}

.ps-filter-group--open .ps-filter-group__arrow,
.ps-filter-group__toggle[aria-expanded="true"] .ps-filter-group__arrow {
  transform: rotate(180deg);
}

.ps-filter-group__body {
  padding: 0 0 1rem 0;
}

.ps-filter-group__body[hidden] {
  display: none;
}

/* Checkbox / radio labels */
.ps-filter-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  color: #000;
  cursor: pointer;
}

.ps-filter-check input {
  margin: 0;
  accent-color: #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #000;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.ps-filter-check input:checked {
  background-color: #000;
  border-color: #000;
  box-shadow: inset 0 0 0 2px #fff;
}

.ps-filter-check input:checked::after {
  display: none;
}

.ps-filter-check span {
  line-height: 1.3;
  transition: font-weight 0.15s;
}

.ps-filter-check:hover span {
  font-weight: 700;
}

.ps-filter-check input:checked + span {
  font-weight: 700;
}

/* Cycle parent labels — bold */
.ps-filter-check--cycle span {
  font-weight: 700;
}

/* Subcategory labels — indented */
.ps-filter-check--subcategory {
  padding-left: 1.25rem;
}

.ps-filter-submit {
  display: none;
}

.ps-filter-reset {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 1.5rem;
  background: #111;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.ps-filter-reset:hover {
  background: #333;
  color: #fff;
}

/* --- Results Area --- */
.programme-search-results {
  flex: 1;
  min-width: 0;
  background-color: #e7ebee;
  padding: 2rem;
}

.programme-search-results__header {
  margin-bottom: 1.5rem;
  padding-top: 1.3rem;
}

.programme-search-results__count-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #000;
  margin-bottom: 1rem;
}

.programme-search-results__sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.programme-search-results__sort-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #474747;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1;
  background-color: #e7ebee;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
}

/* --- Sort pills --- */
.ps-sort-pills {
  display: flex;
  gap: 0.35rem;
}

.ps-sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ps-sort-pill:hover {
  color: #111;
  border-color: #999;
  background: #f7f7f7;
  text-decoration: none;
}

.ps-sort-pill--active {
  color: #fff;
  background: #111;
  border-color: #111;
}

.ps-sort-pill--active:hover {
  color: #fff;
  background: #333;
  border-color: #333;
}

.ps-sort-pill svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .programme-search-results__sort {
    margin-left: 0;
    margin-top: 0.5rem;
  }
  .programme-search-results__count-bar {
    flex-wrap: wrap;
  }
}

.programme-search-results__count-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  line-height: 1;
}

.programme-search-results__count-label {
  font-size: 1rem;
  font-weight: 400;
  color: #555;
}

.programme-search-results__count {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.programme-search-results__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ps-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #005477;
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0, 84, 119, 0.25);
  /* Taille minimale accessible (WCAG 2.5.8 : 24×24px minimum) */
  min-height: 36px;
}

.ps-active-tag:hover {
  background: #003d57;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 84, 119, 0.35);
}

/* Croix de suppression du tag — agrandie pour l'accessibilité */
.ps-active-tag__close {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 0.4rem;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ps-active-tag:hover .ps-active-tag__close {
  opacity: 1;
}

/* --- Result Cards --- */
.programme-search-results__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ps-result-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  transition: box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.ps-result-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Badge code programme — pill style (coin supérieur droit) */
.ps-result-card__code-pill {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #111;
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 20px;
  letter-spacing: 0.03em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  line-height: 1;
}

.ps-result-card__code-pill svg {
  flex-shrink: 0;
  opacity: 0.7;
}

@media (max-width: 1300px) {
  .ps-result-card__code-pill {
    position: static;
    margin-bottom: 0.5rem;
  }
}

.ps-result-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.ps-result-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0;
  line-height: 1.4;
}

.ps-result-tag--cycle {
  background: #1c6381;
  color: #fff;
}

/* Couleurs par cycle — résultats recherche */
.ps-result-tag--cycle-premier-cycle {
  background-color: #1c6381;
  color: #fff;
}

.ps-result-tag--cycle-deuxieme-cycle {
  background-color: #F7D147;
  color: #333;
}

.ps-result-tag--cycle-troisieme-cycle {
  background-color: #58825e;
  color: #fff;
}

.ps-result-tag--domaine {
  background: #e8f0f4;
  color: #1c6381;
}

.ps-result-tag--lieu {
  background: #f0f0f0;
  color: #444;
}

.ps-result-tag--diplome {
  background: #f0f0f0;
  color: #444;
}

.ps-result-tag--regime {
  background: #e0f0e8;
  color: #2d6b3f;
}

.ps-result-tag--regime-temps-complet {
  background: #dce8f5;
  color: #2a5a8c;
}

.ps-result-tag--regime-temps-partiel {
  background: #e0f0e8;
  color: #2d6b3f;
}

.ps-result-tag--trimestre {
  background: #fff3e0;
  color: #8a5a00;
}

/* Tag crédits — fond violet clair pour se distinguer des autres tags */
.ps-result-tag--credit {
  background: #ede7f6;
  color: #4a148c;
}

/* Tag contingenté — fond rouge/orange pour attirer l'attention (info admission importante) */
.ps-result-tag--contingente {
  background: #fce4ec;
  color: #b71c1c;
  font-weight: 700;
}

.ps-result-tag--code {
  display: none;
}

.ps-result-card__title {
  font-size: 1.55rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: #1c6381;
}

.ps-result-card__title a {
  color: #1c6381;
  text-decoration: none;
}

.ps-result-card__title a:hover {
  text-decoration: none;
}

/* Lien cliquable sur toute la carte */
.ps-result-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ps-result-card__link:hover {
  text-decoration: none;
  color: inherit;
}

.ps-result-card:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

.ps-result-card:hover .ps-result-card__title {
  text-decoration: underline;
}

/* Surlignage du mot-clé recherché dans les résultats */
.ps-result-card__title mark,
.ps-result-card__desc mark {
  background-color: #fff3cd;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.ps-result-card__desc {
  font-size: 0.9rem;
  color: #000;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Empty state --- */
.programme-search-results__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #888;
  font-size: 1rem;
}

/* --- Pager --- */
.programme-search-results__pager {
  margin-top: 1rem;
  padding: 0;
}

.programme-search-results__pager .pager__items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Prev / Next buttons */
.programme-search-results__pager .pager__item--previous,
.programme-search-results__pager .pager__item--next {
  flex-shrink: 0;
}

.programme-search-results__pager .pager__item--previous {
  margin-right: auto;
}

.programme-search-results__pager .pager__item--next {
  margin-left: auto;
}

.programme-search-results__pager .pager__item--previous a,
.programme-search-results__pager .pager__item--next a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem !important;
  border: 1px solid #000 !important;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.programme-search-results__pager .pager__item--previous a:hover,
.programme-search-results__pager .pager__item--next a:hover {
  background: #000 !important;
  color: #fff !important;
}

/* Page numbers in the middle */
.programme-search-results__pager .pager__item--page {
  display: inline-flex;
}

.programme-search-results__pager .pager__item a,
.programme-search-results__pager .pager__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0.5rem 0.3rem;
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s;
}

.programme-search-results__pager .pager__item a:hover {
  background: #000 !important;
  color: #fff !important;
}

.programme-search-results__pager .pager__item--active span {
  background: transparent;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  font-weight: 700;
}

/* Ellipsis */
.programme-search-results__pager .pager__item--ellipsis span {
  border: none;
  background: none;
  color: #666;
  min-width: auto;
}

/* Disabled prev/next */
.programme-search-results__pager .pager__item .is-disabled {
  opacity: 0.35;
  pointer-events: none;
  border: 1px solid #000 !important;
  border-radius: 0;
  padding: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #000;
  background: transparent;
}

@media (max-width: 768px) {
  .programme-search-hero {
    min-height: 240px;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .programme-search-hero__title {
    font-size: 1.6rem;
  }
  .programme-search-sidebar {
    flex: none;
    min-width: auto;
  }
  .programme-search-results {
    padding: 2rem 1rem;
  }
  .programme-search-results__pager .pager__items {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }
}

@media (max-width: 500px) {
  .programme-search-results__pager .pager__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    row-gap: 10px;
  }
  .programme-search-results__pager .pager__item--previous {
    order: -1;
    flex-basis: 50%;
    display: flex;
    justify-content: flex-start;
    margin: 0;
  }
  .programme-search-results__pager .pager__item--next {
    order: -1;
    flex-basis: 50%;
    display: flex;
    justify-content: flex-end;
    margin: 0;
  }
  .programme-search-results__pager .pager__item--page,
  .programme-search-results__pager .pager__item--ellipsis {
    order: 1;
  }
}

/* Compteurs de résultats par filtre */
.ps-filter-count {
  font-size: 0.78rem;
  font-weight: 400;
  color: #525252;
  margin-left: 0.15rem;
}

/* Fieldset accessible — reset visuel pour ne pas casser le design */
.ps-filter-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

/* ============================================
   MOBILE DRAWER — FILTRES
   ============================================ */

/* Bouton "Filtres" visible uniquement sur mobile */
.ps-mobile-filter-btn {
  display: none;
}

/* Bouton fermer dans le drawer — caché sur desktop */
.ps-drawer-close {
  display: none;
}

/* Overlay backdrop — caché par défaut */
.ps-drawer-overlay {
  display: none;
}

@media (max-width: 768px) {
  /* Bouton "Filtres" mobile */
  .ps-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    margin: 1rem 1rem 0;
    background: #111;
    color: #fff;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    order: -1;
  }

  .ps-mobile-filter-btn:hover {
    background: #333;
  }

  /* Sidebar en drawer slide-in */
  .programme-search-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    z-index: 10000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding-top: 0;
  }

  .programme-search-sidebar.ps-drawer--open {
    transform: translateX(0);
  }

  /* Bouton fermer dans le drawer */
  .ps-drawer-close {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: #111;
    color: #fff;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .ps-drawer-close:hover {
    background: #333;
  }

  /* Overlay */
  .ps-drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }

  .ps-drawer-overlay.ps-drawer-overlay--visible {
    display: block;
  }

  /* Sticky filters désactivé dans le drawer */
  .programme-search-sidebar .programme-search-filters {
    position: static;
  }
}

/* ============================================
   AUTOCOMPLETE RECHERCHE
   ============================================ */

.ps-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-top: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  max-height: 400px;
  overflow-y: auto;
}

.ps-autocomplete[hidden] {
  display: none;
}

.ps-autocomplete__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-autocomplete__item a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #111;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.ps-autocomplete__item:last-child a {
  border-bottom: none;
}

.ps-autocomplete__item a:hover,
.ps-autocomplete__item--active a {
  background: #f0f5f7;
}

.ps-autocomplete__title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: #111;
}

.ps-autocomplete__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ps-autocomplete__code {
  font-size: 0.78rem;
  font-weight: 700;
  color: #666;
  background: #f0f0f0;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.ps-autocomplete__cycle {
  font-size: 0.78rem;
  color: #1c6381;
  font-weight: 600;
}