/*
 * Barre de filtres, pagination, état vide — issue 13. Référence : planche 6,
 * maquette 3, décisions du 25/09. Balisage : inc/filtres.php.
 *
 * Sur ordinateur, les filtres sont posés en haut de liste. Sous 767, un
 * bouton « Filtrer » (avec le nombre de filtres actifs) ouvre un panneau plein
 * écran ; js/filtres.js l'ouvre, le ferme et y retient le focus.
 *
 * Valeurs de la planche ramenées à l'échelle : intitulés 12 → 14, aides
 * 12,5 → 14, écarts 10 → 8, 18 → 16, 28 → 32.
 */

.pel-filter-bar {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
}

.pel-filter-bar__mobile,
.pel-filter-bar__entete {
	display: none;
}

.pel-filter-bar__panneau {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
}

.pel-filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	margin: 0;
	padding: 0;
	border: 0;
}

/* Légende d'un critère : capitales espacées, bronze (5,29:1 sur blanc). */
.pel-filter-group__legende {
	padding: 0;
	color: var(--pel-bronze);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales-legende);
	text-transform: uppercase;
}

.pel-filter-group__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-2xs);
}

/* La case du filtre reste dans le document, lue et cochée au clavier ;
   l'étiquette porte le rendu (partagé avec pel-tag, css/elements.css). */
.pel-filter-chip {
	position: relative;
	text-decoration: none;
}

.pel-filter-chip__input {
	position: absolute;
	width: var(--pel-filet);
	height: var(--pel-filet);
	margin: 0;
	opacity: 0;
}

.pel-filter-chip:has(.pel-filter-chip__input:focus-visible) {
	outline: var(--pel-focus-epaisseur) solid var(--pel-focus-couleur);
	outline-offset: var(--pel-focus-decalage);
}

/* La croix de retrait n'apparaît que sur un filtre actif. */
.pel-filter-chip__croix {
	display: none;
}

.pel-filter-chip.is-active .pel-filter-chip__croix,
.pel-filter-chip:has(:checked) .pel-filter-chip__croix {
	display: inline-flex;
}

.pel-filter-chip__icone {
	width: var(--pel-icone-s);
	height: var(--pel-icone-s);
}

.pel-filter-bar__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--pel-space-l);
	padding-top: var(--pel-space-s);
	border-top: var(--pel-filet) solid var(--pel-lin);
}

.pel-filter-bar__select {
	min-width: calc(var(--pel-champ-h) * 5);
}

/* Sans JavaScript, le bouton envoie le formulaire ; avec, les changements
   partent seuls sur ordinateur et le bouton n'a plus lieu d'être. */
.pel-filter-bar.is-enhanced .pel-filter-bar__pied {
	display: none;
}

.pel-filter-bar__actifs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pel-space-2xs);
}

/* --- Mobile : un bouton, un panneau plein écran --------------------------- */
@media (max-width: 767px) {
	.pel-filter-bar__mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pel-space-xs);
	}

	.pel-filter-bar__total {
		margin: 0;
		color: var(--pel-gris-chaud);
		font-size: var(--pel-fs-small);
		white-space: nowrap;
	}

	.pel-filter-bar__icone-ouvrir {
		width: var(--pel-icone-s);
		height: var(--pel-icone-s);
	}

	.pel-filter-bar__compteur {
		padding-inline: var(--pel-space-2xs);
		border-radius: var(--pel-radius-pill);
		background: var(--pel-blanc);
		color: var(--pel-terre-foncee);
		font-size: var(--pel-fs-small);
	}

	/* Fermé, le panneau n'existe pas à l'écran — ni au clavier. */
	.pel-filter-bar__panneau {
		display: none;
	}

	.pel-filter-bar.is-open .pel-filter-bar__panneau {
		position: fixed;
		inset: 0;
		z-index: 1000;                    /* au-dessus de l'en-tête collant, celui du thème (50) comme celui de Bricks (brx-sticky : 998) — #300 */
		display: flex;
		gap: var(--pel-space-m);
		overflow-y: auto;
		padding: 0 var(--pel-gutter);
		background: var(--pel-blanc);
	}

	.pel-filter-bar.is-open .pel-filter-bar__entete {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: var(--pel-entete-h);
		border-bottom: var(--pel-filet) solid var(--pel-lin);
		background: var(--pel-blanc);
	}

	.pel-filter-bar__titre {
		margin: 0;
		font-size: var(--pel-fs-h3);
	}

	.pel-filter-bar__fermer {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--pel-cible);
		height: var(--pel-cible);
		border: var(--pel-filet) solid var(--pel-lin);
		border-radius: var(--pel-radius-m);
		background: var(--pel-blanc);
		color: var(--pel-encre);
		cursor: pointer;
	}

	.pel-filter-bar__icone-fermer {
		width: var(--pel-icone);
		height: var(--pel-icone);
	}

	.pel-filter-bar__ligne {
		flex-direction: column;
		gap: var(--pel-space-m);
	}

	.pel-filter-bar__select {
		min-width: 0;
	}

	/* Le bouton d'envoi reste en bas de l'écran, toujours atteignable. */
	.pel-filter-bar.is-open .pel-filter-bar__pied,
	.pel-filter-bar.is-enhanced.is-open .pel-filter-bar__pied {
		position: sticky;
		bottom: 0;
		display: block;
		margin-top: auto;
		padding-block: var(--pel-space-s);
		border-top: var(--pel-filet) solid var(--pel-lin);
		background: var(--pel-blanc);
	}

	.pel-filter-bar__appliquer {
		width: 100%;
	}
}

/* --- Pagination ----------------------------------------------------------- */
.pel-pagination {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-xs);
}

.pel-pagination__etat {
	margin: 0;
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

.pel-pagination__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pel-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-pagination__page,
.pel-pagination__pas {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pel-cible);
	min-height: var(--pel-cible);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-blanc);
	font-size: var(--pel-fs-champ);
	font-weight: 600;
	text-decoration: none;
}

.pel-pagination__page {
	color: var(--pel-encre);
}

/* La page courante : couleur ET aria-current, jamais la couleur seule. */
.pel-pagination__page.is-current {
	border-color: var(--pel-terre-cuite);
	background: var(--pel-terre-cuite);
	color: var(--pel-blanc);
}

.pel-pagination__pas {
	padding-inline: var(--pel-space-s);
	color: var(--pel-terre-foncee);
}

.pel-pagination__ellipse {
	color: var(--pel-gris-chaud);
}

/* --- État vide ------------------------------------------------------------- */
.pel-empty-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-s);
}

.pel-empty-state__titre {
	margin: 0;
	font-size: var(--pel-fs-h3);
}

.pel-empty-state__texte {
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-champ);
	line-height: var(--pel-lh-texte);
}

.pel-empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-xs);
}

/* Filtres sans rechargement (#286) : la liste s'estompe le temps du chargement. */
.pel-liste-articles[aria-busy="true"],
#pel-articles[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity var(--pel-duree-courte) ease;
	pointer-events: none;
}