/**
 * Why – Filtre Portfolio : styles de base (surchargés par les contrôles
 * Elementor de chaque instance du widget).
 *
 * Inspiré de la section contact ("Get a Quote / Send Us Mail / Apply in
 * Career") en bas de la page À propos : typo Anton en majuscules, angles
 * droits, et un hover qui inverse noir/blanc via un fondu qui se déploie de
 * gauche à droite (même logique que le trait animé 0% → 100% de cette
 * section, ici transposée en remplissage de fond pour des boutons
 * compacts plutôt qu'un simple soulignement).
 */

.why-pm-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	/* margin-bottom géré par le contrôle Elementor "Espace sous les filtres" */
}

.why-pm-filter-btn {
	position: relative;
	overflow: hidden;
	z-index: 0;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid rgba(17, 17, 17, 0.15);
	border-radius: 0;
	padding: 10px 26px;
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 16px;
	line-height: 1.2;
	color: #111111;
	transition: color 0.3s ease, border-color 0.4s ease;
}

/* Fondu qui se déploie de gauche à droite (transform plutôt que width,
   pour une animation fluide sur GPU), placé derrière le texte. */
.why-pm-filter-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #111111;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
	z-index: -1;
}

.why-pm-filter-btn:hover,
.why-pm-filter-btn.is-active {
	color: #ffffff;
	border-color: #111111;
}

.why-pm-filter-btn:hover::before,
.why-pm-filter-btn.is-active::before {
	transform: scaleX(1);
}

.why-pm-filter-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}