/**
 * Mise en charte des pages d'ARCHIVE (catégorie, étiquette, auteur, date).
 *
 * Chargée uniquement sur ces gabarits (functions.php → mein_enqueue_archive_assets),
 * comme single-article.css et contact.css. Dépend de « mein-main » pour les tokens.
 *
 * PÉRIMÈTRE ASSUMÉ — ces archives sont du RANGEMENT INTERNE, pas des pages de
 * destination travaillées. L'objectif est qu'un visiteur arrivé là par un lien
 * externe ou un signet ne tombe pas sur une page hors charte ; pas d'en faire une
 * vitrine. D'où une feuille courte, qui habille le rendu natif de core/query sans
 * chercher à répliquer chaque détail de la grille du journal.
 *
 * POURQUOI STYLER LE MARQUAGE DE CORE PLUTÔT QU'UN BLOC MAISON
 * ------------------------------------------------------------
 * Le gabarit conserve core/query + core/post-template + core/query-pagination.
 * C'est ce qui fait fonctionner, sans une ligne de PHP, la pagination NATIVE des
 * archives (/page/2/) — laquelle, contrairement à celle de /blog/, est une vraie
 * pagination d'archive gérée par la requête principale. Un bloc maison aurait dû
 * la réimplémenter pour un gain visuel nul.
 */

/* --- Conteneur de la liste -------------------------------------------- */

.mein-archive {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) clamp(20px, 5vw, 64px) clamp(56px, 7vw, 96px);
}

/* --- Grille de cartes --------------------------------------------------- */

/*
 * La disposition en grille est produite par core (layout « grid » +
 * minimumColumnWidth 300px dans le gabarit) : même règle que la grille du journal,
 * repeat(auto-fill, minmax(min(300px, 100%), 1fr)). On ne fixe ici que l'écart, et
 * on neutralise les marges verticales que core pose entre blocs à l'intérieur des
 * cartes.
 */
.mein-archive .wp-block-post-template {
	gap: 26px;
	padding: 0;
	list-style: none;
}

/* --- Carte : vocabulaire visuel des cartes du journal ------------------- */

.mein-archive .wp-block-post {
	position: relative; /* ancre du lien étiré, cf. plus bas */
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(59, 50, 43, 0.06);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 20px 46px -38px rgba(74, 63, 53, 0.4);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.mein-archive .wp-block-post:hover,
.mein-archive .wp-block-post:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 30px 60px -38px rgba(74, 63, 53, 0.5);
}

/* Image à la une (quand l'article en a une) : cadre fixe, image recadrée. */
.mein-archive .wp-block-post-featured-image {
	margin: 0;
	height: 184px;
	overflow: hidden;
}

.mein-archive .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Corps : tout ce qui suit l'image reçoit le même rembourrage latéral. */
.mein-archive .wp-block-post-terms,
.mein-archive .wp-block-post-title,
.mein-archive .wp-block-post-excerpt {
	margin: 0;
	padding: 0 24px;
}

.mein-archive .wp-block-post-terms {
	padding-top: 24px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sauge-fonce);
}

/*
 * Les liens de catégorie sont RELEVÉS au-dessus du lien étiré (z-index) : sans
 * cela, la surface de la carte les recouvrirait et ils deviendraient inactivables.
 */
.mein-archive .wp-block-post-terms a {
	position: relative;
	z-index: 1;
	color: inherit;
	text-decoration: none;
}

.mein-archive .wp-block-post-terms a:hover {
	text-decoration: underline;
}

.mein-archive .wp-block-post-title {
	padding-top: 13px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.16;
	color: var(--wp--preset--color--titres);
	text-wrap: balance;
}

.mein-archive .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/*
 * LIEN ÉTIRÉ — la carte entière est cliquable, mais elle ne contient qu'UN SEUL
 * lien vers l'article : celui du titre, dont le texte est aussi le nom accessible.
 * C'est la différence avec la grille du journal, où toute la carte est une balise
 * <a> : ici, l'image n'est volontairement pas un lien (une image sans texte
 * alternatif produirait un lien sans intitulé, signalé comme erreur par tout audit)
 * et le lecteur d'écran n'annonce pas deux fois la même destination.
 */
.mein-archive .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mein-archive .wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
}

.mein-archive .wp-block-post-excerpt {
	padding-top: 12px;
	padding-bottom: 28px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--wp--preset--color--texte);
}

/* --- Message « aucun résultat » ---------------------------------------- */

.mein-archive .wp-block-query-no-results p {
	margin: 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	color: var(--wp--preset--color--texte-discret);
}

/* --- Pagination native (/page/N/) -------------------------------------- */

/*
 * Marquage de core (.wp-block-query-pagination, .page-numbers), habillé avec les
 * mêmes pastilles que la pagination du journal. Les valeurs de couleur suivent la
 * même démonstration : sauge foncé plutôt que sauge, parce que le sauge sur crème
 * mesure 4,32:1, sous le seuil de 4,5:1 de WCAG 1.4.3 (AA) pour du texte de 13 px.
 */
.mein-archive .wp-block-query-pagination {
	margin-top: clamp(32px, 4vw, 48px);
	gap: 8px;
	flex-wrap: wrap;
}

.mein-archive .wp-block-query-pagination .page-numbers,
.mein-archive .wp-block-query-pagination-previous,
.mein-archive .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--sauge-brumeux);
	background: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--texte);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.mein-archive .wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--sauge-fonce);
	color: var(--wp--preset--color--sauge-fonce);
}

.mein-archive .wp-block-query-pagination a:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
}

/* Page courante : rendue par core en <span aria-current="page">. */
.mein-archive .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--sauge-fonce);
	border-color: var(--wp--preset--color--sauge-fonce);
	color: var(--wp--preset--color--creme);
}

/* Ellipse : pas une pastille, juste une respiration. */
.mein-archive .wp-block-query-pagination .page-numbers.dots {
	min-width: 20px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--texte);
}

/* --- Respect de prefers-reduced-motion --------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mein-archive .wp-block-post {
		transition: none;
	}

	.mein-archive .wp-block-post:hover,
	.mein-archive .wp-block-post:focus-within {
		transform: none;
	}
}