.pe-content-filter {
  --pe-cf-filter-bg: #f0f0f0;
  --pe-cf-filter-color: #4a4a4a;
  --pe-cf-active-bg: #111111;
  --pe-cf-active-color: #ffffff;
  --pe-cf-filter-font-size: 16px;
  --pe-cf-filter-font-weight: 400;
}

.pe-cf-controls {
  margin-bottom: 2rem;
}

/* Réduit seulement l’espace entre le séparateur et la première entry. */
.pe-cf-controls:has(> .pe-cf-extra-filters) {
  margin-bottom: .65rem;
}

.pe-cf-category {
  margin-bottom: 1.25rem;
}

.pe-cf-category-title {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
  line-height: 1.25;
}

.pe-cf-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.pe-cf-filter-button {
  border: 0;
  border-radius: 14px;
  padding: .75rem 1.6rem;
  cursor: pointer;
  background: var(--pe-cf-filter-bg);
  color: var(--pe-cf-filter-color);
  font-family: inherit;
  font-size: var(--pe-cf-filter-font-size);
  font-weight: var(--pe-cf-filter-font-weight);
  line-height: 1;
  transition: transform .12s ease, opacity .12s ease, background-color .12s ease, color .12s ease;
}

.pe-cf-filter-button:hover {
  transform: translateY(-1px);
  opacity: .92;
}

.pe-cf-filter-button.is-active {
  background: var(--pe-cf-active-bg);
  color: var(--pe-cf-active-color);
}

.pe-cf-entry {
  margin-bottom: 2rem;
}

.pe-cf-entry.is-hidden,
.pe-cf-entry[hidden] {
  display: none !important;
}

.pe-cf-entry-placeholder {
  display: none;
}

.pe-cf-load-more-wrap {
  min-height: 2rem;
  margin: 1.5rem 0 2rem;
  text-align: center;
}

.pe-cf-loading {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
}

.pe-cf-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--pe-cf-filter-color);
  opacity: .35;
  animation: pe-cf-dot-pulse 1s infinite ease-in-out;
}

.pe-cf-dot:nth-child(2) {
  animation-delay: .15s;
}

.pe-cf-dot:nth-child(3) {
  animation-delay: .3s;
}

@keyframes pe-cf-dot-pulse {
  0%, 80%, 100% {
    opacity: .35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-.2rem);
  }
}

/* Catégories secondaires : séparateur discret, contenu déplié au-dessus. */
.pe-cf-extra-filters {
  margin: .15rem 0 .6rem;
}

/* Garder le même modèle de disposition ouvert/fermé évite un saut de mise en page.
   Le summary reste premier dans le DOM pour préserver le <details> natif. */
.pe-cf-extra-filters {
  display: flex;
  flex-direction: column;
}

.pe-cf-extra-filters-toggle {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  border: 0;
  border-radius: 0;
  padding: .3rem 0;
  margin: 0;
  background: transparent;
  color: #858585;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  text-align: center;
  transition: color .15s ease;
}

.pe-cf-extra-filters-toggle::before,
.pe-cf-extra-filters-toggle::after {
  content: '';
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: #d6d6d6;
}

.pe-cf-extra-filters-toggle::-webkit-details-marker { display: none; }
.pe-cf-extra-filters-toggle::marker { content: ''; }
.pe-cf-extra-filters-toggle:hover { color: #555; }
.pe-cf-extra-filters-toggle:focus-visible { outline: 2px solid #858585; outline-offset: 3px; }
.pe-cf-extra-filters-label-closed,
.pe-cf-extra-filters-label-open { white-space: nowrap; }
.pe-cf-extra-filters-label-open { display: none; }
.pe-cf-extra-filters:not(.pe-cf-animated)[open] .pe-cf-extra-filters-label-closed,
.pe-cf-extra-filters.pe-cf-animated.pe-cf-expanded .pe-cf-extra-filters-label-closed { display: none; }
.pe-cf-extra-filters:not(.pe-cf-animated)[open] .pe-cf-extra-filters-label-open,
.pe-cf-extra-filters.pe-cf-animated.pe-cf-expanded .pe-cf-extra-filters-label-open { display: inline; }

/* Ordre constant : les catégories se déroulent au-dessus du séparateur. */
.pe-cf-extra-filters > .pe-cf-extra-filters-content { order: 0; }
.pe-cf-extra-filters > .pe-cf-extra-filters-toggle { order: 1; }
.pe-cf-extra-filters-content { padding: 0 0 .6rem; }
.pe-cf-extra-filters-content > .pe-cf-category:last-child { margin-bottom: 0; }

/* Animation légère du seul panneau de catégories secondaires.
   Le CSS n'agit que lorsque son comportement JS est initialisé. */
.pe-cf-extra-filters.pe-cf-animated .pe-cf-extra-filters-content {
  box-sizing: border-box;
  min-height: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: height 280ms ease-in-out,
              opacity 220ms ease-in-out;
}
.pe-cf-extra-filters.pe-cf-animated:not(.pe-cf-expanded) .pe-cf-extra-filters-content {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pe-cf-extra-filters.pe-cf-animated .pe-cf-extra-filters-content {
    transition: none;
  }
}
