/**
 * Fiche d'actualité — corps de l'article et actualités voisines.
 *
 * Le corps est le seul endroit du site où l'équipe écrit librement, dans
 * l'éditeur. Les sélecteurs y visent donc des balises — p, h2, ul, blockquote —
 * et non des classes du thème : ce qui sort de l'éditeur ne porte pas notre
 * nommage.
 *
 * Aucune maquette : la mise en forme reprend les valeurs de la charte, avec
 * une largeur de lecture ramenée à 720 px. Au-delà, l'œil perd la ligne en
 * revenant à la marge — c'est la seule mesure du site qui n'est pas celle du
 * conteneur, et c'est voulu.
 *
 * Emplacement : assets/css/components/actu-fiche.css
 */

.actu-fiche {
	padding-block: var(--space-9) var(--space-8);
}

/* Fiche sans corps — plusieurs actualités ne sont aujourd'hui qu'un titre et
   une image. Les retraits de la section et le filet du pied creusaient alors
   près de 240 px de vide entre le bandeau et le lien de retour. */
.actu-fiche:not(:has(.actu-fiche__corps)) {
	padding-block: var(--space-6);
}

.actu-fiche:not(:has(.actu-fiche__corps)) .actu-fiche__pied {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.actu-fiche__corps {
	max-width: calc(720px + 2 * var(--gutter));
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* ── Ce que produit l'éditeur ───────────────────────────────── */

.actu-fiche__corps > * + * {
	margin-block-start: var(--space-5);
}

.actu-fiche__corps h2,
.actu-fiche__corps h3 {
	margin-block-start: var(--space-8);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--e4y-green);
}

.actu-fiche__corps h2 { font-size: var(--fs-h2); }
.actu-fiche__corps h3 { font-size: var(--fs-h3); }

.actu-fiche__corps a {
	color: var(--e4y-green);
	text-underline-offset: 0.2em;
}

.actu-fiche__corps a:hover,
.actu-fiche__corps a:focus-visible {
	color: var(--e4y-orange);
}

.actu-fiche__corps ul,
.actu-fiche__corps ol {
	padding-inline-start: var(--space-5);
}

.actu-fiche__corps li + li {
	margin-block-start: var(--space-3);
}

/* La puce reprend l'ambre des accents plutôt que le point noir du navigateur. */
.actu-fiche__corps ul {
	list-style: none;
	padding-inline-start: 0;
}

.actu-fiche__corps ul > li {
	position: relative;
	padding-inline-start: var(--space-5);
}

.actu-fiche__corps ul > li::before {
	content: '';
	position: absolute;
	inset-block-start: 0.6em;
	inset-inline-start: 0;
	width: 8px;
	height: 8px;
	background-color: var(--e4y-amber);
	border-radius: var(--radius-full);
}

/* Citation : le filet vert du côté du texte, comme les messages du site. */
.actu-fiche__corps blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-5);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	color: var(--e4y-green);
	border-inline-start: 4px solid var(--e4y-amber);
}

.actu-fiche__corps img,
.actu-fiche__corps figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.actu-fiche__corps figcaption {
	margin-block-start: var(--space-3);
	font-size: var(--fs-caption);
	color: var(--color-text-muted);
	text-align: center;
}

/* Une image seule peut sortir de la mesure de lecture : une photographie
   gagne à la largeur que le texte perdrait. */
.actu-fiche__corps > figure,
.actu-fiche__corps > .wp-block-image {
	margin-inline: calc(-1 * var(--space-7));
	max-width: calc(100% + 2 * var(--space-7));
}

/* ── Retour à la liste ──────────────────────────────────────── */

.actu-fiche__pied {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	align-items: center;
	justify-content: space-between;
	max-width: calc(720px + 2 * var(--gutter));
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-6);
	border-block-start: 1px solid color-mix(in srgb, var(--e4y-green) 20%, transparent);
}

.actu-fiche__retour {
	display: inline-flex;
	gap: var(--space-3);
	align-items: center;
	min-height: 44px;
	font-weight: var(--fw-bold);
	color: var(--e4y-green);
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}

.actu-fiche__retour:hover,
.actu-fiche__retour:focus-visible {
	color: var(--e4y-orange);
}

/* La flèche du site pointe à droite ; ici elle ramène en arrière. */
.actu-fiche__fleche {
	width: 21px;
	height: auto;
	flex: none;
	transform: rotate(180deg);
}

/* ── À lire aussi ───────────────────────────────────────────── */

.actu-voisines {
	padding-block: var(--space-8) var(--section-gap);
	background-color: var(--e4y-cream);
}

.actu-voisines__titre {
	text-align: center;
}

.actu-voisines__grille {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-5);
	margin: 0;
	margin-block-start: var(--space-7);
	padding: 0;
	list-style: none;
}

.actu-voisines__item {
	display: flex;
	flex: 0 1 100%;
}


/* ============================================================
   Tablette 768px — deux colonnes
   ============================================================ */

@media (min-width: 768px) {

	.actu-voisines__item {
		flex-basis: calc((100% - var(--space-5)) / 2);
	}

}


/* ============================================================
   Desktop 1200px — trois colonnes
   ============================================================ */

@media (min-width: 1200px) {

	.actu-voisines__item {
		flex-basis: calc((100% - 2 * var(--space-5)) / 3);
	}

}


/* ============================================================
   Mobile — les mesures se resserrent
   ============================================================ */

@media (max-width: 767px) {

	.actu-fiche {
		padding-block: var(--space-7) var(--space-6);
	}

	/* Le débord des images n'a plus lieu d'être : la gouttière est déjà la
	   mesure la plus étroite de la page. */
	.actu-fiche__corps > figure,
	.actu-fiche__corps > .wp-block-image {
		margin-inline: 0;
		max-width: 100%;
	}

	/* Comme les autres cartes du site en mobile. */
	.actu-voisines__item {
		max-width: 280px;
		margin-inline: auto;
	}

}


/* ============================================================
   Liste complète des actualités

   La variante nue du bandeau vit dans page-hero.css, où sont ses sœurs : les
   composants se chargent par ordre alphabétique, et une règle posée ici
   serait écrasée par page-hero.css qui passe après.
   ============================================================ */

.actu-liste {
	padding-block: var(--space-8) var(--section-gap);
}

.actu-liste__grille {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-7) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.actu-liste__item {
	display: flex;
	flex: 0 1 100%;
}

.actu-liste__vide {
	font-size: var(--fs-body);
	color: var(--color-text-muted);
	text-align: center;
}

/* Pagination : les pilules de la page introuvable, mêmes proportions. */
.actu-liste__pages {
	margin-block-start: var(--space-8);
}

.actu-liste__pages .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: center;
}

.actu-liste__pages .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--space-4);
	font-size: var(--fs-body);
	color: var(--e4y-green);
	text-decoration: none;
	border: 1px solid var(--e4y-green);
	border-radius: var(--radius-full);
	transition:
		color var(--duration) var(--ease),
		background-color var(--duration) var(--ease);
}

.actu-liste__pages .page-numbers:hover,
.actu-liste__pages .page-numbers:focus-visible,
.actu-liste__pages .page-numbers.current {
	color: var(--color-text-inverse);
	background-color: var(--e4y-green);
}


@media (min-width: 768px) {

	.actu-liste__item {
		flex-basis: calc((100% - var(--space-5)) / 2);
	}

}


@media (min-width: 1200px) {

	.actu-liste__item {
		flex-basis: calc((100% - 2 * var(--space-5)) / 3);
	}

}


@media (max-width: 767px) {

	.actu-liste__item {
		max-width: 280px;
		margin-inline: auto;
	}

}