/* ===========================================================
 * Tab button (.tab-btn)
 * Pilule pour filtres/onglets. Container agnostique
 * (parent gère le flex/gap/wrap). État actif via .is-active.
 * L'actif doit être rendu en <span> (non cliquable, pas de hover).
 * =========================================================== */

.tab-btn {
	display: inline-block;
	padding: 6px 16px;
	color: var(--vert1);
	border: 1px solid var(--vert2);
	border-radius: 23px;
	font-size: 10px;
	letter-spacing: 10%;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
}
/* hover uniquement sur les boutons cliquables (<a>) — l'actif est un <span> */
a.tab-btn {
	cursor: pointer;
}
a.tab-btn:hover {
	color: var(--vert1); /* Override default a:hover color */
	border-color: var(--vert1);
}
.tab-btn.is-active {
	background: var(--vert2);
	color: var(--vert1);
	border-color: var(--vert2);
	cursor: default;
}