/* librairie.css, barre d'outils, jetons et colonne de filtres. */
.outils { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: var(--e3); }
.champ-recherche { position: relative; flex: 1 1 14rem; min-width: 0; }
.champ-recherche input {
  width: 100%; font: inherit; font-size: 1.02rem;
  padding: .95rem 1rem .95rem 2.9rem;
  border: 1px solid var(--ligne); border-radius: var(--r-rond);
  background: var(--blanc);
}
.champ-recherche input:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-voile); }
.champ-recherche svg {
  position: absolute; left: 1.05rem; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; color: var(--encre-tenue); pointer-events: none;
}
.tri {
  font: inherit; font-size: var(--t-petit);
  padding: .9rem 1rem;
  border: 1px solid var(--ligne); border-radius: var(--r-rond);
  background: var(--blanc);
}
.bascule-filtres { display: none; }
@media (max-width: 900px) { .bascule-filtres { display: inline-flex; } }
@media (max-width: 560px) {
  .outils > * { flex: 1 1 100%; }
  .outils .btn { justify-content: center; }
}

.jetons { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--e4); }
.jeton {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-mini); font-weight: 700;
  padding: .45rem .9rem; border-radius: var(--r-rond);
  background: var(--bleu); border: 1px solid var(--bleu); color: #fff;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.jeton svg { width: 10px; height: 10px; }
.jeton:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.jeton-vide { background: none; border-color: var(--ligne); color: var(--encre-douce); }
.jeton-vide:hover { background: var(--encre); border-color: var(--encre); color: #fff; }

.librairie-corps {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
@media (max-width: 900px) { .librairie-corps { grid-template-columns: 1fr; } }

#colonneFiltres {
  position: sticky; top: 118px;
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: var(--r-grand); padding: var(--e3);
  max-height: calc(100vh - 150px); overflow-y: auto;
}
@media (max-width: 900px) {
  #colonneFiltres { position: static; display: none; max-height: none; }
  #colonneFiltres.ouverte { display: block; }
}

.groupe-filtre { border: 0; padding: 0; margin: 0 0 var(--e3); }
.groupe-filtre:last-child { margin-bottom: 0; }
.groupe-filtre legend {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu); padding: 0 0 .7rem;
}
.groupe-filtre ul { list-style: none; margin: 0; padding: 0; }
.groupe-filtre li { margin: 0; }
.groupe-filtre a {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem; margin-left: -.6rem;
  border-radius: var(--r-petit);
  font-size: var(--t-petit); color: var(--encre); text-decoration: none;
}
.groupe-filtre a:hover { background: var(--bleu-voile); }
.groupe-filtre a.actif { background: var(--bleu-voile); color: var(--bleu-fonce); font-weight: 700; }
.groupe-filtre span { flex: 1; }
.groupe-filtre em { font-style: normal; font-size: var(--t-mini); color: var(--encre-tenue); }

.compteur { font-size: var(--t-petit); color: var(--encre-douce); margin-bottom: var(--e3); }

.catalogue-vide {
  text-align: center; padding: var(--e6) var(--e3);
  border: 1px dashed var(--ligne); border-radius: var(--r-grand);
}
.catalogue-vide p { margin-inline: auto; color: var(--encre-douce); }
.catalogue-vide .btn { margin-top: var(--e2); }