/**
 * Tool catalog.
 *
 * Reuses the chips of af-liste.css and the cards of af-components.css. Only
 * what the filter adds lives here: the chips become buttons, the grid takes
 * the full width of the page, and the counter sits between the two.
 */

.af .af-body .af-catalogue {
	margin-block: var(--af-gap-lg);
}

/* Les pastilles de rayon sont des liens ; ici ce sont des boutons, et un
   bouton arrive avec les styles du navigateur. */
.af .af-body .af-chips--filtres .af-chip {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.af .af-body .af-chips--filtres {
	margin-bottom: var(--af-gap-sm);
}

/* af-blocs.css repeint toutes les pastilles du corps en bleu nuit pour leur
   retirer le soulignement des liens : la pastille active y perdait son texte,
   écrit en bleu nuit sur fond bleu nuit. */
.af .af-body .af-chips.af-chips--filtres .af-chip--actif,
.af .af-body .af-chips.af-chips--filtres .af-chip--actif:hover {
	color: #ffffff;
}

.af .af-body .af-chips.af-chips--filtres .af-chip--actif .af-chip__n {
	color: var(--af-on-dark-soft);
}

.af .af-body .af-catalogue__compte {
	margin: 0 0 var(--af-gap-lg);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--af-muted);
}

.af .af-body .af-catalogue__item[hidden] {
	display: none;
}

/* La fiche remplit sa case, quelle que soit la longueur du chapô. */
.af .af-body .af-catalogue__item {
	display: flex;
}

.af .af-body .af-catalogue__item .af-card {
	flex: 1 1 auto;
}

.af .af-body .af-catalogue__vide {
	margin: 0;
	padding: 34px 28px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-xl);
	background: var(--af-surface);
	text-align: center;
	color: var(--af-text-soft);
}

/* Le corps d'une page tient dans une colonne de lecture ; un catalogue, non.
   Même règle que la grille du code court des articles. */
.af .af-art:not(.af-art--toc) .af-body .af-catalogue {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
	max-width: none;
	box-sizing: border-box;
	padding-inline: max(24px, calc(50vw - (var(--af-max) / 2)));
}

@media (min-width: 992px) {
	.af .af-art--toc .af-body .af-catalogue__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}