/**
 * Listing pages: rayons, search results, 404.
 *
 * Reuses .af-grid and .af-card from af-components.css. Only what a listing
 * adds is defined here: the heading, the rayon chips, the wide first card,
 * the pagination and the empty state.
 */

.af .af-liste {
	padding-top: 38px;
	padding-bottom: var(--af-gap-xl);
}

/* --------------------------------------------------------------------------
   En-tête de liste
   -------------------------------------------------------------------------- */

.af .af-listehead {
	margin: 0 0 var(--af-gap-lg);
}

.af .af-listehead__title {
	font-family: var(--af-titre);
	margin: 16px 0 0;
	max-width: 820px;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--af-navy);
}

.af .af-listehead__desc {
	margin: 14px 0 0;
	max-width: 760px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--af-text-soft);
}

.af .af-listehead__desc p { margin: 0 0 12px; }
.af .af-listehead__desc p:last-child { margin-bottom: 0; }

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

.af .af-listehead--centre {
	max-width: 640px;
	margin: 20px auto var(--af-gap-lg);
	text-align: center;
}

.af .af-listehead--centre .af-listehead__title,
.af .af-listehead--centre .af-listehead__desc {
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Pastilles des rayons
   -------------------------------------------------------------------------- */

.af .af-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--af-gap-lg);
}

.af .af-chip,
.af .af-chip:link,
.af .af-chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-pill);
	background: var(--af-surface);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--af-navy);
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.af .af-chip:hover {
	border-color: var(--af-navy);
	transform: translateY(-1px);
}

.af .af-chip__n {
	font-size: 12px;
	font-weight: 700;
	color: var(--af-muted);
}

.af .af-chip--actif,
.af .af-chip--actif:link,
.af .af-chip--actif:visited {
	border-color: var(--af-navy);
	background: var(--af-navy);
	color: #ffffff;
}

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

/* --------------------------------------------------------------------------
   La grille, et sa première fiche en pleine largeur
   -------------------------------------------------------------------------- */

.af .af-card__lead {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--af-text-soft);
}

.af .af-card__sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	opacity: 0.55;
}

.af .af-card-slot--large { grid-column: 1 / -1; }

@media (min-width: 768px) {
	.af .af-card-slot--large .af-card {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: stretch;
	}

	/* Le format natif des vignettes, et surtout pas height: 100% : la hauteur
	   de rangée n'est pas définie, l'image reprenait alors sa taille naturelle
	   et étirait la fiche sur deux écrans. Tout autre rapport rognerait le
	   titre composé dans la vignette. */
	.af .af-card-slot--large .af-card__media {
		aspect-ratio: 16 / 9;
		max-height: 400px;
		object-fit: cover;
	}

	.af .af-card-slot--large .af-card__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 34px 38px;
	}

	.af .af-card-slot--large .af-card__title {
		font-family: var(--af-titre);
		font-size: 26px;
		line-height: 1.2;
		letter-spacing: -0.015em;
	}

	.af .af-card-slot--large .af-card__lead {
		font-size: 17px;
		margin-bottom: 18px;
	}
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.af .af-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: var(--af-gap-xl) 0 0;
}

.af .af-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-md);
	background: var(--af-surface);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	color: var(--af-navy);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.af .af-pagination a.page-numbers:hover { border-color: var(--af-navy); }

.af .af-pagination .page-numbers.current {
	border-color: var(--af-navy);
	background: var(--af-navy);
	color: #ffffff;
}

.af .af-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--af-muted);
}

/* --------------------------------------------------------------------------
   Recherche
   -------------------------------------------------------------------------- */

.af .af-recherche {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-gap-sm);
	max-width: 620px;
	margin: 26px 0 0;
}

.af .af-listehead--centre .af-recherche { margin-inline: auto; }

.af .af-recherche__input {
	flex: 999 1 280px;
	min-width: 0;
	box-sizing: border-box;
	min-height: 52px;
	padding: 15px 20px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-md);
	font: inherit;
	font-size: 16px;
	color: var(--af-text);
	background: var(--af-surface);
}

.af .af-recherche__input:focus {
	outline: none;
	border-color: var(--af-navy);
	box-shadow: 0 0 0 3px rgba(18, 29, 52, 0.12);
}

.af .af-recherche__btn { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Liste vide
   -------------------------------------------------------------------------- */

.af .af-vide {
	margin: 0 0 var(--af-gap-lg);
	padding: 44px 38px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-xl);
	background: var(--af-surface);
	text-align: center;
	color: var(--af-text-soft);
}

.af .af-vide p { margin: 0; font-size: 17px; line-height: 1.6; }

.af .af-vide__titre {
	font-family: var(--af-titre);
	margin: 0 0 10px !important;
	font-size: 23px !important;
	font-weight: 700;
	color: var(--af-navy);
}

@media (max-width: 575px) {
	.af .af-vide { padding: 30px 22px; }
}

/* --------------------------------------------------------------------------
   La grille du code court, dans le contenu d'une page
   -------------------------------------------------------------------------- */

/* Le corps d'une page tient dans une colonne de lecture de 960 px. Une liste
   d'articles n'est pas du texte suivi : elle reprend la pleine largeur du
   site. Par les marges et non par une translation, pour qu'elle ne puisse
   pas déborder. Écartée des pages à sommaire, où la colonne de lecture
   n'est pas centrée dans la fenêtre. */
.af .af-art:not(.af-art--toc) .af-body .af-grid--liste,
.af .af-art:not(.af-art--toc) .af-body .af-grid--liste + .af-pagination {
	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)));
}

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

.af .af-body .af-grid--liste + .af-pagination { margin-top: var(--af-gap-lg); }

/* Sur une page à sommaire, la colonne de lecture n'est pas centrée dans la
   fenêtre : la grille ne peut pas prendre la pleine largeur sans se décaler.
   Elle passe à deux colonnes, ce qui laisse respirer les fiches. */
@media (min-width: 992px) {
	.af .af-art--toc .af-body .af-grid--liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Dans le contenu d'une page, la règle des liens du corps souligne aussi les
   numéros de page : il faut peser plus lourd qu'elle. */
.af .af-body .af-pagination .page-numbers,
.af .af-body .af-pagination a.page-numbers:hover {
	text-decoration: none;
	color: var(--af-navy);
}

.af .af-body .af-pagination .page-numbers.current {
	color: #ffffff;
}