/**
 * Section — Nos articles (pages catégorie, section 5).
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px) :
 *   suptitre    y 3916 (centré)   titre y 3965 (64px, centré)
 *   liste       x 219 → 1711, filets à 4118, 4292, 4466, 4640
 *   ligne       hauteur 174 : 52 de retrait, catégorie, 29, titre (36px), 26
 *   pastille    x 1632, 40 × 40, brun à flèche dorée
 *   pagination  y 4872, pastilles de 44, écart 12, centrées
 */

.cat-articles {
	position: relative;
	background-color: var(--anidjar-fond);
	padding-block: clamp(3rem, 8.8021vw, 169px) clamp(3rem, 4.8438vw, 93px);
}

.cat-articles__header {
	max-width: var(--anidjar-contenu-max);
	margin-inline: auto;
	padding-inline: var(--anidjar-gouttiere);
	text-align: center;
}

.cat-articles__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
	margin-right: calc(-1 * var(--anidjar-interlettre-capitales));
}

.cat-articles__title {
	margin: 26px 0 0;
	font-size: var(--anidjar-fs-xl);
	line-height: 1.21875;
}

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

.cat-articles__list {
	box-sizing: border-box;
	/* Colonne de lignes de 1492 (largeur de la maquette), centrée. L'ancien
	   retrait de 219 à gauche s'ajoutait au centrage et décalait les lignes vers
	   la droite sur grand écran. */
	max-width: calc(1492px + 2 * var(--anidjar-gouttiere));
	margin: clamp(2.5rem, 5.8854vw, 113px) auto 0; /* 4118 − (3965 + 78) */
	padding-inline: var(--anidjar-gouttiere);
	list-style: none;
}

.cat-articles__item {
	border-top: 1px solid var(--anidjar-filet-fonce);
}

.article-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40px;
	align-items: start;
	padding: 52px 39px 26px 41px;
	color: var(--anidjar-texte);
	text-decoration: none;
}

.article-row__term {
	display: block;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.article-row__title {
	display: block;
	margin-top: 29px;
	font-family: var(--anidjar-police-titre);
	font-size: clamp(1.5rem, 1.875vw, 2.25rem); /* 36px */
	font-weight: var(--anidjar-graisse-titre);
	line-height: normal;
}

.article-row__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: 28px; /* la pastille est 80px sous le filet, dont 52 de retrait */
	border-radius: 50%;
	background-color: var(--anidjar-fond-sombre);
	color: var(--anidjar-or-fonce);
	transition: transform var(--anidjar-transition);
}

.article-row__arrow svg {
	width: 16px;
	height: auto;
}

/* hello-elementor forcerait la couleur du lien à #336 au survol. */
.article-row:hover,
.article-row:focus-visible {
	color: var(--anidjar-texte);
}

.article-row:hover .article-row__arrow {
	transform: translateX(4px);
}

.article-row:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: -4px;
}

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

.cat-articles__pagination {
	margin-top: 58px; /* 4872 − 4814 */
	text-align: center;
}

.cat-articles__pagination ul {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-chip {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	/* Filet clair explicite : il détache la pastille du fond crème ET remplace le
	   contour framboise que hello-elementor dessine sinon sur les <button>. */
	border: 1px solid var(--anidjar-filet-clair);
	border-radius: 50%; /* même vocabulaire que les flèches et boutons de contact */
	background-color: var(--anidjar-ivoire);
	background-image: none;
	color: var(--anidjar-texte);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	font-weight: var(--anidjar-graisse-texte);
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--anidjar-transition), background-image var(--anidjar-transition),
		color var(--anidjar-transition), transform var(--anidjar-transition);
}

/* Neutralisation de TOUS les états : hello-elementor/Elementor peignent sinon
   le fond en framboise au survol, au focus et au clic. */
.page-chip:hover,
.page-chip:focus,
.page-chip:focus-visible,
.page-chip:active {
	border-color: var(--anidjar-filet-clair);
	background-color: var(--anidjar-ivoire);
	background-image: none;
	color: var(--anidjar-texte);
}

.page-chip:hover,
.page-chip:focus-visible {
	border-color: transparent;
	background-image: var(--anidjar-degrade-or);
	color: var(--anidjar-texte-sur-or);
	transform: translateY(-2px);
}

/* Page courante : pastille dorée pleine, sans réaction au survol. */
.page-chip--current,
.page-chip--current:hover,
.page-chip--current:focus,
.page-chip--current:focus-visible {
	border-color: transparent;
	background-image: var(--anidjar-degrade-or);
	color: var(--anidjar-texte-sur-or);
	transform: none;
}

.page-chip:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Mobile et tablette
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.cat-articles {
		padding-block: var(--anidjar-espace-2xl);
	}

	.cat-articles__list {
		padding-inline: var(--anidjar-gouttiere);
	}

	.article-row {
		padding: var(--anidjar-espace-lg) 0;
	}

	.article-row__title {
		margin-top: var(--anidjar-espace-sm);
	}

	.article-row__arrow {
		margin-top: var(--anidjar-espace-sm);
	}
}

@media (prefers-reduced-motion: reduce) {
	.article-row__arrow,
	.page-chip {
		transition: none;
	}

	.article-row:hover .article-row__arrow {
		transform: none;
	}
}