/**
 * Dahu Theme Annad 2026 — bloc « Filtres de la FAQ » (annad/faq-filtres, 4.54.0).
 *
 * Pilules claires de la page FAQ (tokens de light-zone.css, repli sur la palette hors zone claire).
 * Les règles de filtrage sont écrites par le bloc (render.php, une par catégorie). Ici : les
 * pilules, l'état coché, et l'apparition des questions qui réapparaissent.
 * Mobile : une ligne qui défile horizontalement ; à partir de 40em, les pilules passent à la ligne.
 */

/* Deux classes : plus fort que le fieldset et les libellés de formulaire de la zone claire
   (:is(.annad-light-page, .annad-light-zone) fieldset / label, light-zone.css). */
.wp-block-annad-faq-filtres.annad-faq-filtres {
	min-width: 0; /* Un fieldset ne rétrécit pas sous son contenu sans cela : le défilement mobile en dépend. */
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.annad-faq-filtres__list {
	display: flex;
	gap: 0.5rem;
	/* Mobile : la rangée défile jusqu'aux bords de l'écran (dans la gouttière de la page) ;
	   0.25rem en haut et en bas pour le contour de focus. */
	margin-inline: calc(-1 * var(--gutter, 1rem));
	padding: 0.25rem var(--gutter, 1rem);
	scroll-padding-inline: var(--gutter, 1rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

@media (min-width: 40em) {
	.annad-faq-filtres__list {
		flex-wrap: wrap;
		margin-inline: -0.25rem;
		padding: 0.25rem;
		overflow-x: visible;
	}
}

.annad-faq-filtres__item {
	position: relative;
	flex: 0 0 auto;
}

/* Case masquée visuellement, toujours focusable (Tab, Espace) : pas de display:none. */
.annad-faq-filtres__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.annad-faq-filtres .annad-faq-filtres__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	margin: 0;
	padding: 0.5rem 1.125rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--color-on-surface-light, #1c1a1a);
	background-color: var(--light-field, var(--wp--preset--color--blanc, #fff));
	border: 1px solid var(--light-line, rgba(28, 26, 26, 0.22));
	border-radius: 999px;
	cursor: pointer;
	transition:
		color var(--annad-transition-fast, 150ms) var(--annad-ease, ease),
		background-color var(--annad-transition-fast, 150ms) var(--annad-ease, ease),
		border-color var(--annad-transition-fast, 150ms) var(--annad-ease, ease),
		box-shadow var(--annad-transition-fast, 150ms) var(--annad-ease, ease);
}

.annad-faq-filtres__count {
	min-width: 1.5em;
	padding: 0.0625rem 0.4375rem;
	font-size: 0.75rem;
	text-align: center;
	color: var(--light-muted, rgba(28, 26, 26, 0.6));
	background-color: color-mix(in srgb, var(--color-on-surface-light, #1c1a1a) 8%, transparent);
	border-radius: 999px;
}

.annad-faq-filtres__input:hover + .annad-faq-filtres__pill {
	border-color: var(--color-on-surface-light, #1c1a1a);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--color-on-surface-light, #1c1a1a) 15%, transparent);
}

.annad-faq-filtres__input:focus-visible + .annad-faq-filtres__pill {
	outline: 2px solid var(--color-on-surface-light, #1c1a1a);
	outline-offset: 2px;
}

/* Catégorie choisie : pilule foncée, compteur vert Annad. */
.annad-faq-filtres__input:checked + .annad-faq-filtres__pill {
	color: var(--wp--preset--color--blanc, #fff);
	background-color: var(--color-on-surface-light, #1c1a1a);
	border-color: var(--color-on-surface-light, #1c1a1a);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color-on-surface-light, #1c1a1a) 25%, transparent);
}

.annad-faq-filtres__input:checked + .annad-faq-filtres__pill .annad-faq-filtres__count {
	color: var(--color-on-surface-light, #1c1a1a);
	background-color: var(--wp--preset--color--vert-annad, #d5eb17);
}

/*
 * Questions qui réapparaissent (filtre changé, filtre retiré, recherche) : un display:none qui se lève
 * relance l'animation. Seulement après un premier choix (.is-used, view.js) : rien au chargement.
 */
@keyframes annad-faq-apparition {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.annad-faq-page:has(.annad-faq-filtres.is-used) .annad-faq-entry {
	animation: annad-faq-apparition 250ms var(--annad-ease, ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
	.annad-faq-filtres__pill {
		transition: none;
	}

	.annad-faq-page:has(.annad-faq-filtres.is-used) .annad-faq-entry {
		animation: none;
	}
}