/**
 * Catalogue : barre de filtres, grille de résultats, état vide.
 * Chargée uniquement sur les pages de catalogue (voir Core\Assets).
 */

.ar-catalog {
	display: grid;
	gap: var(--ar-space-6);
	grid-template-columns: 280px 1fr;
	align-items: start;
	padding-block: var(--ar-space-6) var(--ar-space-9);
}

@media (max-width: 960px) {
	.ar-catalog { grid-template-columns: 1fr; }
}

.ar-filters {
	position: sticky;
	top: 92px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-lg);
	padding: var(--ar-space-5);
}

@media (max-width: 960px) {
	.ar-filters { position: static; }
}

.ar-filters__group + .ar-filters__group {
	margin-top: var(--ar-space-5);
	padding-top: var(--ar-space-5);
	border-top: 1px solid var(--ar-line);
}

.ar-filters__legend {
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--ar-tracking-wide);
	color: var(--ar-ink-muted);
	margin-bottom: var(--ar-space-3);
	padding: 0;
}

.ar-filters__option {
	display: flex;
	align-items: center;
	gap: var(--ar-space-2);
	font-size: var(--ar-text-sm);
	color: var(--ar-ink-soft);
	padding-block: var(--ar-space-1);
	cursor: pointer;
}

.ar-filters__option input {
	accent-color: var(--ar-primary);
	width: 1rem;
	height: 1rem;
}

.ar-filters__count {
	margin-inline-start: auto;
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-xs);
	color: var(--ar-ink-muted);
}

.ar-catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ar-space-3);
	margin-bottom: var(--ar-space-5);
}

.ar-catalog__count {
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-sm);
	color: var(--ar-ink-muted);
}

.ar-catalog__results {
	display: grid;
	gap: var(--ar-space-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.ar-catalog__results[aria-busy="true"] { opacity: 0.5; }

.ar-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--ar-space-8) var(--ar-space-5);
	border: 1px dashed var(--ar-line-strong);
	border-radius: var(--ar-radius-lg);
	color: var(--ar-ink-soft);
}

.ar-search-bar {
	display: flex;
	gap: var(--ar-space-2);
	width: min(100%, 460px);
}

.ar-search-bar input[type="search"] {
	flex: 1;
	padding: 0.7em 1em;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius);
	background: var(--ar-surface);
	color: var(--ar-ink);
	font: inherit;
	font-size: var(--ar-text-sm);
}

/* En-tête et tuiles de catégories */

.ar-catalog__header {
	padding-block: var(--ar-space-4) var(--ar-space-6);
}

.ar-catalog__intro {
	max-width: var(--ar-container-text);
	color: var(--ar-ink-soft);
}

.ar-tiles {
	list-style: none;
	margin: 0 0 var(--ar-space-6);
	padding: 0;
	display: grid;
	gap: var(--ar-space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.ar-tile {
	display: flex;
	flex-direction: column;
	gap: var(--ar-space-1);
	height: 100%;
	padding: var(--ar-space-4) var(--ar-space-5);
	background: var(--ar-surface-2);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-lg);
	text-decoration: none;
	transition: border-color var(--ar-duration) var(--ar-ease),
		transform var(--ar-duration) var(--ar-ease);
}

.ar-tile:hover {
	border-color: var(--ar-primary);
	transform: translateY(-2px);
}

.ar-tile__name {
	font-family: var(--ar-font-display);
	font-size: var(--ar-text-lg);
	font-weight: 600;
	color: var(--ar-ink);
}

.ar-tile__count {
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-xs);
	color: var(--ar-ink-muted);
}

.ar-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-2);
}

.ar-catalog__sort {
	margin: 0;
}

.ar-catalog__sort select {
	width: auto;
	min-width: 180px;
}

/* Calendrier */

.ar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-2);
	margin-bottom: var(--ar-space-6);
}

.ar-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4em 0.9em;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius-pill);
	font-size: var(--ar-text-sm);
	color: var(--ar-ink-soft);
	text-decoration: none;
}

.ar-chip:hover {
	border-color: var(--ar-primary);
	color: var(--ar-primary);
}

.ar-chip.is-active {
	background: var(--ar-primary);
	border-color: var(--ar-primary);
	color: var(--ar-on-primary);
}

.ar-month + .ar-month {
	margin-top: var(--ar-space-7);
}

.ar-month__title {
	font-size: var(--ar-text-xl);
	text-transform: capitalize;
	padding-bottom: var(--ar-space-2);
	margin-bottom: var(--ar-space-4);
	border-bottom: 1px solid var(--ar-line);
}

.ar-ticket__seats.is-full {
	color: var(--ar-danger);
}

/* Formateurs */

.ar-person__media {
	display: block;
	aspect-ratio: 1;
	max-width: 128px;
	margin: var(--ar-space-5) var(--ar-space-5) 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ar-surface-3);
}

.ar-person__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ar-person__skills {
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-xs);
	color: var(--ar-ink-muted);
	margin: 0;
}

/* =========================================================================
   Annuaire des formateurs
   ====================================================================== */

.ar-people-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ar-space-3);
	margin-bottom: var(--ar-space-5);
	padding: var(--ar-space-4);
	background: var(--ar-surface-2);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-lg);
}

.ar-people-filters__search {
	flex: 1 1 220px;
	min-width: 0;
}

.ar-people-filters__search input {
	width: 100%;
}

.ar-people-filters__select select {
	min-width: 180px;
}

.ar-people-filters__reset {
	font-size: var(--ar-text-sm);
	color: var(--ar-ink-muted);
}

.ar-people-count {
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-xs);
	letter-spacing: var(--ar-tracking-wide);
	color: var(--ar-ink-muted);
	margin-bottom: var(--ar-space-4);
}

/* Cartes compactes : le portrait en médaillon à côté du nom occupe bien
   moins de hauteur qu'un bandeau, ce qui permet d'en voir davantage d'un
   seul écran — l'objet même d'un annuaire. */
.ar-people {
	display: grid;
	gap: var(--ar-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.ar-person-card {
	display: flex;
	flex-direction: column;
	padding: var(--ar-space-5);
	background: var(--ar-surface-2);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-lg);
	transition: border-color var(--ar-duration) var(--ar-ease),
		transform var(--ar-duration) var(--ar-ease),
		box-shadow var(--ar-duration) var(--ar-ease);
}

.ar-person-card:hover {
	border-color: var(--ar-primary);
	transform: translateY(-2px);
	box-shadow: var(--ar-shadow);
}

.ar-person-card__head {
	display: flex;
	align-items: center;
	gap: var(--ar-space-4);
	margin-bottom: var(--ar-space-4);
}

.ar-person-card__media {
	flex: none;
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ar-primary-soft);
	box-shadow: 0 0 0 1px var(--ar-line-strong);
}

.ar-person-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

.ar-person-card__initials {
	font-family: var(--ar-font-display);
	font-size: var(--ar-text-2xl);
	font-weight: 700;
	line-height: 1;
	color: var(--ar-primary);
}

.ar-person-card__name {
	font-size: var(--ar-text-lg);
	line-height: 1.2;
	margin: 0 0 var(--ar-space-1);
}

.ar-person-card__name a {
	text-decoration: none;
	color: var(--ar-ink);
}

.ar-person-card__name a:hover {
	color: var(--ar-primary);
}

.ar-person-card__job {
	font-size: var(--ar-text-sm);
	color: var(--ar-ink-muted);
	margin: 0;
}

.ar-person-card__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-2);
	margin: 0 0 var(--ar-space-4);
	padding: 0;
}

.ar-person-card__tags li {
	padding: 0.2em 0.65em;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-pill);
	font-size: var(--ar-text-xs);
	color: var(--ar-ink-soft);
}

/* Poussés en bas : les pieds de cartes restent alignés d'une carte à
   l'autre, quelle que soit la longueur des étiquettes. */
.ar-person-card__facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-space-1) var(--ar-space-4);
	margin: auto 0 0;
	padding: var(--ar-space-3) 0;
	border-top: 1px solid var(--ar-line);
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-xs);
	color: var(--ar-ink-muted);
}

.ar-person-card__link {
	font-family: var(--ar-font-mono);
	font-size: var(--ar-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--ar-tracking-wide);
	text-decoration: none;
}

.ar-person-card__link::after {
	content: " →";
}

.ar-person-card__link:hover {
	text-decoration: underline;
}

@media (max-width: 560px) {

	.ar-people-filters {
		padding: var(--ar-space-3);
	}

	.ar-people-filters__select,
	.ar-people-filters .ar-btn {
		flex: 1 1 100%;
	}

	.ar-people-filters__select select,
	.ar-people-filters .ar-btn {
		width: 100%;
	}
}