/* Menu de tri (inc/tri-catalogue.php), 18/10/2026 : pastille au style des filtres,
   à droite de la barre, avant le nombre de produits.
   v2 (20/10/2026) : téléphone (≤ 767 px), « Filtrer », tri et nombre de produits sur UNE ligne ; tablette et
   ordinateur inchangés (boîte du tri neutre, étiquette courte cachée). */

/* Ordinateur et tablette : comme avant */
.anaaz-tri__boite {
	display: contents;
}

.anaaz-tri__affiche {
	display: none;
}

.anaaz-tri {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto;
}

.anaaz-tri + .anaaz-filtre__resultat {
	margin-left: 4px;
}

.anaaz-tri__libelle {
	font-size: 13px;
	color: var(--anaaz-filtre-doux, #6b6b6b);
	white-space: nowrap;
}

.anaaz-tri__choix {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 9px 36px 9px 16px;
	border: 0;
	border-radius: 30px;
	background-color: var(--anaaz-filtre-fond, #f2f2f2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	color: var(--anaaz-filtre-texte, #111);
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.anaaz-tri__choix:hover {
	background-color: var(--anaaz-filtre-actif, #e8e6e3);
}

.anaaz-tri__choix:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* Téléphone : à côté de « Filtrer », sans le mot « Trier par » (gardé pour les lecteurs d'écran). */
@media (max-width: 767px) {
	.anaaz-tri__libelle {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Une seule ligne : Filtrer | tri | (espace) nombre */
	.anaaz-filtre .anaaz-filtre__barre {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.anaaz-filtre .anaaz-filtre__ouvrir {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 14px;
		gap: 6px;
		white-space: nowrap;
	}

	.anaaz-tri {
		flex: 0 1 auto;
		min-width: 0;
		margin: 0;
	}

	/* Pastille : affiche seulement le choix en cours ; la vraie liste est posée dessus, transparente */
	.anaaz-tri__boite {
		position: relative;
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
		min-height: 44px;
		padding: 0 30px 0 14px;
		border-radius: 30px;
		background-color: var(--anaaz-filtre-fond, #f2f2f2);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		color: var(--anaaz-filtre-texte, #111);
		font-weight: 600;
		line-height: 1.2;
	}

	.anaaz-tri__affiche {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.anaaz-tri__boite .anaaz-tri__choix {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 30px;
		background: none;
		opacity: 0;
		font-size: 16px; /* pas de zoom automatique sur iPhone à l'ouverture */
		cursor: pointer;
	}

	.anaaz-tri__boite:focus-within {
		outline: 2px solid #111;
		outline-offset: 2px;
	}

	/* Nombre de produits : à droite, petit et gris, sans retour à la ligne */
	.anaaz-filtre__barre .anaaz-filtre__resultat {
		flex: 0 0 auto;
		margin: 0 0 0 auto;
		color: var(--anaaz-filtre-doux, #757575); /* ≈ 4,6:1 sur blanc */
		font-size: 12px;
		line-height: 1.2;
		white-space: nowrap;
		text-align: right;
	}
}

/* Petits téléphones (< 400 px : 360, 375, 390 px) : « 95 » seul à l'écran, « produits » gardé pour les lecteurs d'écran */
@media (max-width: 399px) {
	.anaaz-filtre__barre .anaaz-filtre__resultat-mot {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}