/**
 * Listes — archives, rubriques, recherche, 404 — charte 2026.
 * Le mobilier de colonne latérale vient de mh-charte.css, partagé avec l'article.
 * Aucun !important sauf pour battre une règle Divi nommée en commentaire.
 */

/* ------------------------------------------------------------------ Ossature */

.mh-arc {
	padding: 26px 0 56px;
}

.mh-arc-grid {
	display: grid;
	grid-template-columns: minmax(0, 800px) 312px;
	gap: 40px;
	align-items: start;
}

.mh-arc-main,
.mh-arc-aside {
	min-width: 0;
}

/* ------------------------------------------------------------------- En-tête */

.mh-arc-head {
	margin: 14px 0 26px;
	max-width: 760px;
}

.mh-arc-head > .mh-eyebrow {
	display: block;
	margin-bottom: 8px;
}

.mh-arc-head h1 {
	font-family: var(--mh-display);
	font-size: clamp(30px, 4.2vw, 44px);
	line-height: 1.08;
	margin: 0;
}

.mh-arc-head .mh-lead {
	margin-top: 12px;
}

/* La description de terme arrive en HTML : ses paragraphes doivent respirer. */
.mh-arc-head .mh-lead p {
	margin: 0 0 10px;
}

.mh-arc-head .mh-lead p:last-child {
	margin-bottom: 0;
}

.mh-arc-count {
	margin: 12px 0 0;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- Pilules */

.mh-arc-rubriques {
	margin: 0 0 30px;
	padding: 18px 20px;
	background: var(--mh-tint);
	border-radius: var(--mh-r);
}

.mh-arc-rubriques-t {
	font-family: var(--mh-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mh-eyebrow);
	margin: 0 0 12px;
}

.mh-arc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mh-arc-pill-n {
	margin-left: 6px;
	font-variant-numeric: tabular-nums;
	color: var(--mh-muted);
	font-weight: 400;
}

/* --------------------------------------------------------------------- Cartes */

.mh-arc-list {
	margin: 0;
}

.mh-arc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mh-arc-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--mh-peg);
	border-bottom: 1px solid var(--mh-line);
	overflow: hidden;
}

.mh-arc-card-media img,
.mh-arc-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Une grille recadrée est une grille inutilisable : la fiche se contient. */
.mh-arc-card.is-modele .mh-arc-card-media {
	aspect-ratio: 1 / 1;
}

.mh-arc-card.is-modele .mh-arc-card-media img {
	object-fit: contain;
}

.mh-arc-card-txt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}

.mh-arc-card-t {
	font-family: var(--mh-display);
	font-size: 18px;
	line-height: 1.25;
	margin: 0;
}

.mh .mh-arc-card-t a {
	color: var(--mh-ink);
	text-decoration: none;
}

.mh .mh-arc-card-t a:hover,
.mh .mh-arc-card-t a:focus {
	color: var(--mh-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mh-arc-card-x {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mh-ink-2);
}

.mh-arc-card time {
	margin-top: auto;
	font-variant-numeric: tabular-nums;
}

.mh-tag-modele {
	background: var(--mh-ink);
	color: #FFFFFF;
	border-color: var(--mh-ink);
}

/* ----------------------------------------------------------- Bloc de fiches */

.mh-arc-fiches {
	margin: 0 0 8px;
}

/* Le bloc de modèles porte déjà sa marge haute : ici il ouvre la colonne. */
.mh-arc-fiches .mh-modeles-block {
	margin-top: 0;
}

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

.mh-arc-search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mh-arc-search input[type="search"] {
	flex: 1 1 160px;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--mh-line-strong);
	border-radius: var(--mh-r-sm);
	background: var(--mh-surface);
	font-family: var(--mh-text);
	font-size: 16px;
	color: var(--mh-ink);
	box-sizing: border-box;
}

.mh-arc-search input[type="search"]:focus {
	outline: 2px solid var(--mh-link);
	outline-offset: 1px;
	border-color: var(--mh-link);
}

.mh-arc-search .mh-btn {
	flex: 0 0 auto;
}

.mh-arc-searchbar {
	margin: 0 0 28px;
	max-width: 620px;
}

/* La colonne est étroite : le champ et le bouton s'empilent. */
.mh-aside-block .mh-arc-search {
	flex-direction: column;
}

.mh-aside-block .mh-arc-search .mh-btn {
	width: 100%;
}

/* --------------------------------------------------------------- État vide */

.mh-arc-empty {
	padding: 30px 26px;
	text-align: center;
}

.mh-arc-empty-peg {
	display: block;
	width: 96px;
	height: 60px;
	margin: 0 auto 16px;
	border-radius: var(--mh-r-sm);
	border: 1px solid var(--mh-line);
}

.mh-arc-empty h2 {
	font-family: var(--mh-display);
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 8px;
}

.mh-arc-empty p {
	margin: 0 auto 18px;
	max-width: 46ch;
	color: var(--mh-ink-2);
}

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

.mh-arc-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

.mh-arc-pg,
.mh .mh-arc-pg,
a.mh-arc-pg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mh-line-strong);
	border-radius: var(--mh-r-sm);
	background: var(--mh-surface);
	font-family: var(--mh-text);
	font-size: 15px;
	font-weight: 600;
	color: var(--mh-ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}

.mh .mh-arc-pg:hover,
.mh .mh-arc-pg:focus {
	border-color: var(--mh-ink);
	color: var(--mh-ink);
	text-decoration: none;
}

.mh .mh-arc-pg.is-on {
	background: var(--mh-ink);
	border-color: var(--mh-ink);
	color: #FFFFFF;
}

.mh-arc-gap {
	color: var(--mh-muted);
	padding: 0 2px;
}

/* -------------------------------------------------------------------- 404 */

.mh-404 {
	padding: 30px 0 60px;
}

.mh-404-hero {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	margin-bottom: 40px;
}

.mh-404-peg {
	display: block;
	width: 100%;
	height: auto;
}

.mh-404-plate {
	fill: var(--mh-peg);
	stroke: var(--mh-line);
	stroke-width: 1;
}

.mh-404-off {
	fill: var(--mh-peg-dot);
}

.mh-404-on {
	fill: var(--mh-red);
}

.mh-404-txt > .mh-eyebrow {
	display: block;
	margin-bottom: 8px;
}

.mh-404-txt h1 {
	font-family: var(--mh-display);
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.06;
	margin: 0 0 14px;
}

.mh-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.mh-404-search {
	margin-top: 18px;
	max-width: 520px;
}

.mh-404-picks {
	margin-top: 40px;
}

/* --------------------------------------------------------------- Tablette */

@media (max-width: 1100px) {
	.mh-arc-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}
}

@media (max-width: 860px) {
	.mh-404-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.mh-404-art {
		max-width: 300px;
	}
}

/* ----------------------------------------------------------------- Mobile */

@media (max-width: 767px) {
	.mh-arc {
		padding: 18px 0 40px;
	}

	.mh-arc-head {
		margin-bottom: 20px;
	}

	.mh-arc-card-txt {
		padding: 11px 12px 13px;
		gap: 6px;
	}

	.mh-arc-card-t {
		font-size: 16px;
	}

	/* Deux cartes par ligne : le chapeau de carte n'a plus la place. */
	.mh-arc-card-x {
		display: none;
	}

	.mh-arc-rubriques {
		padding: 14px 16px;
	}

	.mh-404 {
		padding: 22px 0 44px;
	}

	.mh-404-actions .mh-btn,
	.mh-404-actions .mh-btn2 {
		width: 100%;
	}
}

@media (max-width: 420px) {
	.mh-arc-list.mh-g3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mh-arc-card-x {
		display: block;
	}
}