/* LE FILTRE PAR MÉTAL — archive des alliages, 06/10.

   LES MÊMES PUCES QUE LA PAGE TÉLÉCHARGEMENTS, et c'est voulu : un
   visiteur qui a filtré des documents reconnaît le geste. Elles n'ont
   pas été factorisées dans une feuille commune pour autant — les deux
   barres n'ont ni le même balisage ni le même voisinage, et une classe
   partagée les figerait ensemble pour une ressemblance qui tient à
   trois déclarations. */

.mc-filtre-el {
	margin: 0 0 32px;
}

.mc-filtre-el__intitule {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-gris, #6E757C);
}

.mc-filtre-el__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mc-filtre-el__puce {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* 44 px de haut : c'est la cible tactile minimale, et ces puces
	   seront surtout touchées au doigt sur un catalogue. */
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--mc-filet, rgba(77, 77, 77, 0.16));
	border-radius: 100px;
	background: #FFFFFF;
	color: var(--mc-encre, #4D4D4D);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--mc-ease, 0.18s ease),
		border-color var(--mc-ease, 0.18s ease),
		color var(--mc-ease, 0.18s ease);
}

.mc-filtre-el__puce:hover {
	border-color: var(--mc-action, #D87A00);
	color: var(--mc-action, #D87A00);
}

.mc-filtre-el__puce:focus-visible {
	outline: 2px solid var(--mc-action, #D87A00);
	outline-offset: 2px;
}

/* LA PUCE ACTIVE NE SE DISTINGUE PAS QUE PAR LA COULEUR : elle est
   pleine, donc son contraste change du tout au tout. C'est la règle
   suivie partout sur ce site — le sens ne doit jamais tenir à la seule
   teinte. aria-pressed le dit par ailleurs aux lecteurs d'écran. */
.mc-filtre-el__puce.is-active {
	background: var(--mc-action, #D87A00);
	border-color: var(--mc-action, #D87A00);
	color: #FFFFFF;
}

/* Le compteur : combien d'alliages contiennent ce métal. Il répond à la
   question avant le clic, ce qui évite les culs-de-sac. */
.mc-filtre-el__compte {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.6;
}

.mc-filtre-el__puce.is-active .mc-filtre-el__compte {
	opacity: 0.8;
}

.mc-filtre-el__vide {
	margin: 16px 0 0;
	color: var(--mc-gris, #6E757C);
}

@media (max-width: 600px) {

	.mc-filtre-el__puce {
		padding: 8px 13px;
		font-size: 0.8125rem;
	}
}