/*
 * Module Recherche avancée (mod_finder), mise en page « recherche ».
 * Reprend l'apparence de l'ancien module SEBLOD « Recherche générale » (#search_generic)
 * définie dans custom.css. Chargé uniquement par html/mod_finder/recherche.php.
 */

.ps-finder {
  margin: 0;
}

/*
 * Alignement vertical dans la barre du haut.
 * custom.css centre la colonne top2 via « .sp-column.text-center.text-lg-right », une classe
 * Bootstrap 4. Helix Ultimate (Bootstrap 5) génère désormais « text-lg-end » : la règle ne
 * s'applique plus, les modules retombent en inline-block alignés sur la ligne de base, et le
 * menu profil (boîte de 30 px pour des icônes de 36 px) ne partage plus l'axe du champ.
 * On rétablit la colonne en flex centrée, sur grand écran uniquement.
 */
@media screen and (min-width: 992px) {
  #sp-top2 > .sp-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

/*
 * Le logo (#sp-logo, position absolue top:-211px dans #sp-header) est placé par rapport au bas du
 * bandeau : sa hauteur dépend donc de celle de ce module. L'ancien module SEBLOD ajoutait 16 px de
 * marges internes autour du champ ; sans elles le bandeau perd 16 px et le logo touche le haut de
 * la fenêtre. On restitue ces 8 px en haut et en bas (bandeau ≈ 82 px, logo à 10 px du bord).
 */
#sp-top-bar .sp-module.ps-mod-recherche {
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 8px 0;
}

#sp-top-bar .sp-module.ps-mod-recherche .sp-module-content,
.ps-finder,
.ps-finder__field {
  display: flex;
  align-items: center;
  width: 100%;
}

.ps-finder__field {
  position: relative;
}

/*
 * L'autocomplétion (awesomplete) enveloppe le champ et la liste de suggestions dans une div.
 * La liste n'a qu'un z-index: 1, alors que #sp-header (fond blanc, juste sous le bandeau) est en
 * z-index: 99 : il recouvrait la partie de la liste qui déborde du bandeau. On passe l'enveloppe
 * au premier plan — pas la liste elle-même, dont toutes les propriétés sont animées par
 * awesomplete (le z-index partirait de 1 à chaque ouverture).
 */
.ps-finder__field .awesomplete {
  display: block;
  width: 100%;
  z-index: 1000;
}

.ps-finder__input {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 40px;
  padding: 5px 44px 5px 20px;
  font-size: 20px;
  line-height: 1.5;
  background-color: #fff;
  color: #191919;
  -webkit-appearance: none;
  appearance: none;
}

.ps-finder__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ps-finder__input:focus {
  outline: 2px solid var(--violet, #5d00b2);
  outline-offset: 1px;
}

.ps-finder__button {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 16px;
  padding: 0;
  border: 0;
  transform: translateY(-50%);
  background: transparent url("/images/icons/search.svg") no-repeat center / contain;
  cursor: pointer;
  z-index: 2;
}

/*
 * Liste des suggestions. custom.css impose « #sp-top-bar { color: transparent } » et la colonne
 * est alignée à droite : la liste en héritait (texte invisible, seul le <mark> surligné restait
 * lisible). On lui donne ses propres couleurs, dans la charte du site.
 */
.ps-finder .awesomplete > ul {
  color: var(--g3, #333);
  text-align: left;
  font-size: 15px;
  line-height: 1.4;
  background: #fff;
  border: 1px solid rgba(92, 0, 178, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
  padding: 4px 0;
}

.ps-finder .awesomplete > ul::before {
  display: none;
}

.ps-finder .awesomplete > ul > li {
  color: var(--g3, #333);
  padding: 6px 14px;
  cursor: pointer;
}

.ps-finder .awesomplete > ul > li mark {
  background: transparent;
  color: var(--violet, #5c00b2);
  font-weight: 700;
  padding: 0;
}

.ps-finder .awesomplete > ul > li:hover,
.ps-finder .awesomplete > ul > li[aria-selected="true"] {
  background: var(--violet, #5c00b2);
  color: #fff;
}

.ps-finder .awesomplete > ul > li:hover mark,
.ps-finder .awesomplete > ul > li[aria-selected="true"] mark {
  background: transparent;
  color: var(--vert-clair, #c2fccc);
}

/* Barre du haut (position top2) */
#sp-top2 .ps-finder__input {
  min-width: 270px;
}

@media screen and (max-width: 1690px) {
  #sp-top2 .ps-finder__input {
    min-width: 135px;
    max-width: 135px;
    padding: 5px 36px 5px 12px;
    font-size: 15px;
  }
}

@media screen and (max-width: 1300px) and (min-width: 991px) {
  #sp-top2 .ps-finder__input {
    padding: 9px 36px 9px 12px;
  }
}

@media screen and (max-width: 1095px) {
  #sp-top2 .ps-finder__input {
    min-width: 90px;
    max-width: 90px;
  }
}

/* Menu mobile (position offcanvas) */
.offcanvas-menu .ps-finder__input,
.offcanvas-overlay .ps-finder__input {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 7px 44px 7px 25px;
  font-size: 17px;
}

.offcanvas-menu .ps-mod-recherche {
  width: 100%;
}