/**
 * Barre de recherche des cours / blogue
 * - Position à droite avec largeur 50%
 * - Fond semi-transparent avec bordure arrondie
 */


/**
 * Container de l'input de recherche
 */
.page-blogue .search-input-wrapper,
.page-prealables .search-input-wrapper,
.page-cours-anne-scolaire .search-input-wrapper {
   position: relative;
   width: 100%;
   max-width: 600px;
}

/**
 * Champ de saisie pour la recherche
 * - Fond transparent avec bordure inférieure
 * - Texte blanc, placeholder gris
 */
.page-blogue .search-input,
.page-prealables .search-input,
.page-cours-anne-scolaire .search-input {
   width: 100%;
   padding: var(--space-md) 0px;
   border: none;
   border-radius: 0px;
   border-bottom: 1px solid var(--color-grey);
   background-color: transparent;
   color: var(--color-white);
   font-size: var(--font-size-lg);
   font-family: var(--font-primary);
}

.page-blogue .search-input::placeholder,
.page-prealables .search-input::placeholder,
.page-cours-anne-scolaire .search-input::placeholder {
   color: var(--color-grey);
}

/**
 * Icône de recherche positionnée à droite
 */
.page-blogue .search-icon,
.page-prealables .search-icon,
.page-cours-anne-scolaire .search-icon {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   filter: brightness(0) invert(1);
   pointer-events: none;
}

.page-blogue .search-input:focus,
.page-prealables .search-input:focus,
.page-cours-anne-scolaire .search-input:focus {
   outline: none;
   border-bottom-color: var(--color-white);
}

.page-blogue .post-search,
.page-prealables .courses-search,
.page-cours-anne-scolaire .courses-search {
   margin-top: var(--space-lg);
   margin-left: auto;
   width: 50%;
   display: flex;
   flex-direction: column;
   gap: 25px;
   background-color: #3131317a;
   border-radius: 15px;
   padding: 25px;
}

.page-blogue .post-search {
   margin-top: 0px;
}

.page-blogue .post-search span,
.page-prealables .courses-search span,
.page-cours-anne-scolaire .courses-search span {
   font-family: var(--font-primary);
   color: var(--color-white);
}

@media (max-width: 1024px) {
   .page-blogue .search-input-wrapper,
   .page-prealables .search-input-wrapper,
   .page-cours-anne-scolaire .search-input-wrapper {
      max-width: none;
   }
}

@media (max-width: 768px) {
   .search-section .select__black {
      width: 100%;
   }

   .page-blogue .post-search {
      width: 100%;
      max-width: none;
   }
}