/* =============================================================================
 *  Actualités — styles du CPT (branchés sur le design-system ds-bundle.css)
 *  Chargé inline, conditionnellement sur /actualites/ (archive + single) via
 *  app/hooks/actualites.php — même pattern CWV que outils-simulateurs.
 *
 *  Les valeurs utilisent les tokens du DS avec un fallback défensif :
 *  var(--token, valeur) → si le token DS existe il gagne, sinon la valeur
 *  reste cohérente avec la charte. Aucun rendu cassé si un token diffère.
 * ========================================================================== */

/* ---------- Largeurs ---------- */
:root {
	--actu-max-hub: 1160px;
	--actu-max-read: 880px;
}

/* ---------- Fil d'Ariane ----------
   Deplace dans custom-2026.css (section « HUB ») : il est commun au hub Actualites et a
   l'archive Livres blancs. Seule l'adaptation du single reste ici. */

/* Single actu : on masque VISUELLEMENT le dernier crumb (le titre, doublon du H1)
   tout en gardant le microdata BreadcrumbList complet (3 niveaux) dans le DOM,
   donc lu par Google.
   Plus besoin de neutraliser un separateur orphelin : dans custom-2026.css (section « HUB ») il est
   porte par « li + li::before », il disparait donc avec le maillon masque. */
.actu-single__hero .hero-breadcrumb li:last-child { display: none; }

/* =============================================================================
 *  HUB / ARCHIVE  (/actualites/)
 * ========================================================================== */
.lp-actu-hub { color: var(--color-content-primary, #222222); }

/* Haut de page, conteneur de corps et grille : deplaces dans custom-2026.css (section « HUB »).
   `.actu-grid` est conservee ci-dessous car single-actualite.php l'utilise
   encore pour le bloc « Nos dernieres actualites ». L'archive, elle, passe
   desormais par `.hub-grid`. */

.actu-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-24, 24px);
}
@media (max-width: 1000px) { .actu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .actu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .actu-grid { grid-template-columns: 1fr; } }

.actu-card { margin: 0; position: relative; }
.actu-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--color-white, #FFFFFF);
	border: var(--border-stroke-1, 1px) solid var(--color-divider-primary, #DFD6C9);
	border-radius: var(--border-radius-2, 2px);
	overflow: hidden;
	transition: border-color var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out),
	            box-shadow var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out),
	            transform var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out);
}
.actu-card__link:hover,
.actu-card__link:focus-within {
	border-color: var(--color-content-accent, #005BC1);
	box-shadow: 0 12px 28px rgba(34, 34, 34, .10);
	transform: translateY(-3px);
}
.actu-card__photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-accent-300, #EAF2FD); }
.actu-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actu-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8, 8px);
	padding: var(--spacing-16, 16px);
	flex: 1;
}
.actu-card__date {
	font-size: var(--typography-paragraph-font-size-4, 12px);
	line-height: var(--typography-paragraph-line-height-4, 16px);
	font-weight: var(--typography-font-weight-bold, 700);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--color-content-secondary, #5E5E5E);
	font-variant-numeric: tabular-nums;
}
.actu-card__title {
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-6, 16px);
	line-height: var(--typography-headline-line-height-6, 20px);
	font-weight: var(--typography-font-weight-medium, 500);
	margin: 0;
}

/* Le lien n'entoure que le titre : l'ancre transmise aux moteurs est le titre
   de l'article, sans la date. La carte entiere reste cliquable grace a la
   surface etendue ci-dessous, qui recouvre le .actu-card positionne. */
.actu-card__title a {
	color: inherit;
	text-decoration: none;
}
.actu-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.actu-card__link:hover .actu-card__title,
.actu-card__link:focus-within .actu-card__title { color: var(--color-accent-900, #00409D); }

/* Pagination : deplacee dans custom-2026.css (section « HUB ») (`.hub-pagination`). */

/* =============================================================================
 *  SINGLE  (/actualites/{slug}/)
 * ========================================================================== */
/* Hero pleine largeur sur fond lin (façon guides) */
.actu-single__hero {
	/* Meme fond que les trois archives (lin fonce) : seule harmonisation
	   demandee sur cette page, le reste du hero single est inchange. */
	background: var(--color-surface-decorative-linen-medium, #E9DFD0);
}
.actu-single__hero-inner {
	max-width: var(--actu-max-read);
	margin: 0 auto;
	padding: var(--spacing-24, 24px) var(--spacing-24, 24px) var(--spacing-40, 40px);
}
.actu-single__hero .hero-breadcrumb { padding-top: var(--spacing-8, 8px); }
.actu-single__title {
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-2, 42px);
	line-height: var(--typography-headline-line-height-2, 50px);
	font-weight: var(--typography-font-weight-medium, 500);
	letter-spacing: -0.015em;
	margin: var(--spacing-16, 16px) 0 0;
}

/* Signature auteur : avatar + « Publié le … / par … » (façon Shine) */
.actu-single__byline {
	display: flex;
	align-items: center;
	gap: var(--spacing-12, 12px);
	margin-top: var(--spacing-24, 24px);
}
/* Neutralise tout cadre/fond hérité d'un style global sur ces éléments. */
.actu-single__byline .actu-single__byline-text,
.actu-single__byline .actu-single__pubdate,
.actu-single__byline .actu-single__author,
.actu-single__byline .actu-single__pubdate time {
	border: 0;
	outline: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
}
.actu-single__avatar { flex: none; line-height: 0; }
.actu-single__avatar img {
	width: 44px;
	height: 44px;
	border-radius: var(--border-radius-9999, 9999px);
	object-fit: cover;
	display: block;
}
.actu-single__byline-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--typography-paragraph-font-size-3, 14px);
	line-height: 1.4;
	color: var(--color-content-secondary, #5E5E5E);
}
.actu-single__byline-text .actu-single__author a {
	color: var(--color-content-accent, #005BC1);
	text-decoration: none;
	font-weight: var(--typography-font-weight-medium, 500);
}
.actu-single__byline-text .actu-single__author a:hover { text-decoration: underline; }

/* Temps de lecture */
.actu-single__reading {
	display: flex;
	align-items: center;
	gap: var(--spacing-8, 8px);
	margin: var(--spacing-16, 16px) 0 0;
	font-size: var(--typography-paragraph-font-size-3, 14px);
	color: var(--color-content-secondary, #5E5E5E);
}
.actu-single__clock { flex: none; }

/* Ligne « par Nom · temps de lecture » : sur une même ligne, collée */
.actu-single__author-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-4, 4px) var(--spacing-16, 16px);
}
.actu-single__author-line .actu-single__reading { margin: 0; }
.actu-single__author-line .actu-single__author { display: inline; white-space: nowrap; word-spacing: normal; }

.lp-actu-single > article {
	max-width: var(--actu-max-read);
	margin: 0 auto;
	padding: 0 var(--spacing-24, 24px) var(--spacing-72, 72px);
}
.actu-single__cover { margin: var(--spacing-24, 24px) 0 0; }
.actu-single__cover img { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--border-radius-2, 2px); display: block; }

.actu-single__content {
	margin-top: var(--spacing-32, 32px);
	font-size: var(--typography-paragraph-font-size-1, 18px);
	line-height: var(--typography-paragraph-line-height-1, 28px);
	color: var(--color-content-primary, #222222);
}
.actu-single__content h2 {
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-3, 28px);
	line-height: var(--typography-headline-line-height-3, 36px);
	font-weight: var(--typography-font-weight-medium, 500);
	margin: var(--spacing-40, 40px) 0 var(--spacing-12, 12px);
}
.actu-single__content h3 {
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-4, 20px);
	line-height: var(--typography-headline-line-height-4, 28px);
	font-weight: var(--typography-font-weight-medium, 500);
	margin: var(--spacing-32, 32px) 0 var(--spacing-8, 8px);
}
.actu-single__content p { margin: var(--spacing-16, 16px) 0; }
.actu-single__content a { color: var(--color-content-accent, #005BC1); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Sources ---------- */
.actu-single__sources {
	margin-top: var(--spacing-40, 40px);
	padding: var(--spacing-24, 24px) 0;
	border-top: var(--border-stroke-1, 1px) solid var(--color-divider-primary, #DFD6C9);
	border-bottom: var(--border-stroke-1, 1px) solid var(--color-divider-primary, #DFD6C9);
}
.actu-single__sources h2 {
	font-size: var(--typography-headline-font-size-6, 16px);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-content-secondary, #5E5E5E);
	font-weight: var(--typography-font-weight-bold, 700);
	margin: 0 0 var(--spacing-12, 12px);
}
.actu-single__sources .sourceList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-8, 8px); }
.actu-single__sources .sourceList a { display: inline-flex; align-items: center; gap: var(--spacing-8, 8px); color: var(--color-content-accent, #005BC1); text-decoration: none; font-size: var(--typography-paragraph-font-size-2, 16px); }
.actu-source-ico { flex: none; color: var(--color-content-secondary, #5E5E5E); }
.actu-single__sources .sourceList a:hover { text-decoration: underline; }

/* ---------- Bloc auteur (bas d'article, style épuré façon Shine) ---------- */
.actu-single__author {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-32, 32px);
	max-width: var(--actu-max-read);
	margin: var(--spacing-48, 48px) auto 0;
	padding: 0 var(--spacing-24, 24px);
}
.actu-single__author-media {
	flex: none;
	width: 120px;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8, 8px);
}
.actu-single__author-photo {
	width: 100px;
	height: 100px;
	object-fit: cover;
	display: block;
	border-radius: var(--border-radius-2, 2px);
}
.actu-single__author-label {
	font-size: var(--typography-paragraph-font-size-4, 12px);
	color: var(--color-content-secondary, #5E5E5E);
}
.actu-single__author-name {
	font-weight: var(--typography-font-weight-bold, 700);
	color: var(--color-content-primary, #222222);
	font-size: var(--typography-paragraph-font-size-2, 16px);
}
.actu-single__author-bio {
	flex: 1;
	color: var(--color-content-secondary, #5E5E5E);
	font-size: var(--typography-paragraph-font-size-2, 16px);
	line-height: var(--typography-paragraph-line-height-2, 24px);
}
@media (max-width: 560px) {
	.actu-single__author { flex-direction: column; gap: var(--spacing-16, 16px); }
	.actu-single__author-media { flex-direction: row; align-items: center; width: auto; }
}

/* =============================================================================
 *  Bloc « Nos dossiers » (bas du hub)
 * ========================================================================== */
.actu-dossiers {
	background: var(--color-surface-primary, #F8F6F3);
	border-top: var(--border-stroke-1, 1px) solid var(--color-divider-primary, #DFD6C9);
}
.actu-dossiers__inner {
	max-width: var(--actu-max-hub);
	margin: 0 auto;
	padding: var(--spacing-56, 56px) var(--spacing-24, 24px) var(--spacing-64, 64px);
}
.actu-dossiers__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-16, 16px);
	margin-bottom: var(--spacing-32, 32px);
}
.actu-dossiers__title {
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-3, 28px);
	line-height: var(--typography-headline-line-height-3, 36px);
	font-weight: var(--typography-font-weight-medium, 500);
	margin: 0;
}
.actu-dossiers__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-24, 24px);
}
@media (max-width: 920px) { .actu-dossiers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .actu-dossiers__grid { grid-template-columns: 1fr; } }
.actu-dossier { margin: 0; position: relative; }
.actu-dossier__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--color-white, #FFFFFF);
	border: var(--border-stroke-1, 1px) solid var(--color-divider-primary, #DFD6C9);
	border-radius: var(--border-radius-2, 2px);
	overflow: hidden;
	transition: border-color var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out),
	            box-shadow var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out),
	            transform var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out);
}
.actu-dossier__link:hover,
.actu-dossier__link:focus-within {
	border-color: var(--color-content-accent, #005BC1);
	box-shadow: 0 14px 30px rgba(34, 34, 34, .10);
	transform: translateY(-3px);
}
.actu-dossier__photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-accent-300, #EAF2FD); }
.actu-dossier__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actu-dossier__body { display: flex; flex-direction: column; gap: var(--spacing-12, 12px); padding: var(--spacing-20, 20px); flex: 1; }
.actu-dossier__title {
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-4, 20px);
	line-height: var(--typography-headline-line-height-4, 28px);
	font-weight: var(--typography-font-weight-medium, 500);
	color: var(--color-content-primary, #222222);
}
/* Comme la carte actu : le lien porte le titre et rien d'autre, la surface
   etendue rend toute la carte cliquable. Le libelle de lien (« Voir le
   guide → ») a ete supprime, front et back. */
.actu-dossier__title a {
	color: inherit;
	text-decoration: none;
}
.actu-dossier__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.actu-dossier__link:hover .actu-dossier__title,
.actu-dossier__link:focus-within .actu-dossier__title { color: var(--color-accent-900, #00409D); }

/* -----------------------------------------------------------------------------
 *  Variante slider — au-dela de 4 cartes
 *
 *  La piste defile a l'horizontale (doigt, pave tactile, fleches) au lieu de
 *  passer sur une deuxieme rangee. La grille de 4 colonnes ci-dessus reste la
 *  mise en page par defaut : cette section ne s'applique qu'avec le modificateur
 *  pose par le template quand il y a plus de 4 cartes.
 * -------------------------------------------------------------------------- */

.actu-dossiers__nav { display: flex; gap: var(--spacing-8, 8px); }
.actu-dossiers__nav[hidden] { display: none; }
.actu-dossiers__arw {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: var(--border-stroke-1, 1px) solid var(--color-divider-primary, #DFD6C9);
	border-radius: 50%;
	background: var(--color-white, #FFFFFF);
	color: var(--color-content-primary, #222222);
	cursor: pointer;
	transition: border-color var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out),
	            color var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out),
	            opacity var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out);
}
.actu-dossiers__arw svg { width: 20px; height: 20px; display: block; }
.actu-dossiers__arw:hover:not(:disabled) {
	border-color: var(--color-content-accent, #005BC1);
	color: var(--color-content-accent, #005BC1);
}
.actu-dossiers__arw:disabled { opacity: .35; cursor: default; }

.actu-dossiers--slider .actu-dossiers__grid {
	display: flex;
	gap: var(--spacing-24, 24px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* La barre de defilement est masquee : les fleches et le geste tactile
	   suffisent, et une barre sous les cartes alourdit le bloc. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Un conteneur qui defile sur un axe rogne l'autre. Sans ce rembourrage,
	   le decollement de 3px et l'ombre portee du survol seraient coupes ;
	   les marges negatives lui rendent la place prise. */
	padding: 8px 0 24px;
	margin: -8px 0 -24px;
}
.actu-dossiers--slider .actu-dossiers__grid::-webkit-scrollbar { display: none; }
.actu-dossiers--slider .actu-dossiers__grid:focus-visible {
	outline: var(--border-stroke-2, 2px) solid var(--color-content-accent, #005BC1);
	outline-offset: 2px;
}
/* 4 cartes visibles, la 5e affleure : meme largeur de carte que dans la grille. */
.actu-dossiers--slider .actu-dossier {
	flex: 0 0 calc((100% - 3 * var(--spacing-24, 24px)) / 4);
	scroll-snap-align: start;
}
@media (max-width: 920px) {
	.actu-dossiers--slider .actu-dossier { flex-basis: calc((100% - var(--spacing-24, 24px)) / 2); }
}
@media (max-width: 520px) {
	/* Moins de 100% : le bord de la carte suivante indique qu'on peut faire defiler. */
	.actu-dossiers--slider .actu-dossier { flex-basis: 82%; }
}
@media (prefers-reduced-motion: reduce) {
	.actu-dossiers--slider .actu-dossiers__grid { scroll-behavior: auto; }
}

/* =============================================================================
 *  Signature auteur (haut) + partage (single)
 * ========================================================================== */
.actu-single__meta .actu-single__author-name { color: var(--color-content-primary, #222222); font-weight: var(--typography-font-weight-medium, 500); }
.actu-single__meta-sep { margin: 0 var(--spacing-8, 8px); color: var(--color-divider-primary, #DFD6C9); }

/* ---------- Sommaire auto (dans l'article) ---------- */
.actu-single__toc {
	margin: var(--spacing-32, 32px) 0;
	padding: var(--spacing-24, 24px);
	background: var(--color-surface-primary, #F8F6F3);
	border-radius: var(--border-radius-2, 2px);
}
.actu-single__toc-title {
	display: block;
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-5, 18px);
	font-weight: var(--typography-font-weight-medium, 500);
	color: var(--color-content-primary, #222222);
	margin-bottom: var(--spacing-12, 12px);
}
.actu-single__toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8, 8px);
}
.actu-single__toc a {
	color: var(--color-content-accent, #005BC1);
	text-decoration: none;
	font-size: var(--typography-paragraph-font-size-2, 16px);
}
.actu-single__toc a:hover { text-decoration: underline; }

/* ---------- Partage : horizontal en haut (mobile) / rail sticky à droite (desktop) ---------- */
.actu-single__share {
	display: flex;
	align-items: center;
	gap: var(--spacing-12, 12px);
	margin: var(--spacing-32, 32px) 0 var(--spacing-24, 24px);
}
.actu-single__share-label {
	font-size: var(--typography-paragraph-font-size-4, 12px);
	font-weight: var(--typography-font-weight-bold, 700);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--color-content-secondary, #5E5E5E);
}
.actu-share-btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--border-stroke-1, 1px) solid var(--color-divider-primary, #DFD6C9);
	border-radius: var(--border-radius-9999, 9999px);
	color: var(--color-content-secondary, #5E5E5E);
	text-decoration: none;
	font-weight: var(--typography-font-weight-bold, 700);
	font-size: var(--typography-paragraph-font-size-3, 14px);
	transition: border-color var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out),
	            color var(--motion-duration-200, 200ms) var(--motion-easing-ease-out, ease-out);
}
.actu-share-btn:hover { border-color: var(--color-content-accent, #005BC1); color: var(--color-content-accent, #005BC1); }

@media (min-width: 1180px) {
	.actu-single__share {
		position: sticky;
		top: 100px;
		float: right;
		flex-direction: column;
		gap: var(--spacing-8, 8px);
		margin: 0 -72px 0 var(--spacing-32, 32px);
	}
	.actu-single__share-label { display: none; }
}

/* =============================================================================
 *  « Nos dernières actualités » (bas du single) — réutilise .actu-grid/.actu-card
 * ========================================================================== */
.actu-single__related {
	background: var(--color-surface-primary, #F8F6F3);
	margin-top: var(--spacing-56, 56px);
}
.actu-single__related-inner {
	max-width: var(--actu-max-hub);
	margin: 0 auto;
	padding: var(--spacing-48, 48px) var(--spacing-24, 24px) var(--spacing-64, 64px);
}
.actu-single__related-title {
	font-family: var(--typography-headline-font-family, 'ES Rebond Grotesque');
	font-size: var(--typography-headline-font-size-3, 28px);
	line-height: var(--typography-headline-line-height-3, 36px);
	font-weight: var(--typography-font-weight-medium, 500);
	margin: 0 0 var(--spacing-32, 32px);
}

/* =============================================================================
 *  MOBILE — carte en ligne
 * =============================================================================
 *  En colonne unique, la photo 16/9 mangeait l'ecran : une seule actualite
 *  visible a la fois. On bascule en ligne horizontale, vignette a gauche.
 *
 *  La vignette est CARREE et large de 76px, exactement comme celle de
 *  l'archive Livres blancs : les deux hubs s'alignent donc sur mobile.
 *  Le carre est prefere au 16/9 parce qu'a cette largeur un 16/9 ne ferait que
 *  43px de haut, bien plus court que les deux lignes de titre a cote.
 *
 *  Point de rupture identique a celui ou .hub-grid passe a une colonne : les
 *  deux changements sont solidaires.
 *
 *  Volontairement NON mutualise avec .lb-card dans custom-2026.css : les deux
 *  cartes n'ont pas la meme anatomie (photo paysage + date ici, couverture
 *  portrait + pastille + bouton la-bas) et pas les memes valeurs. Mettre ces
 *  regles en commun obligerait la feuille globale a connaitre les internes des
 *  deux composants pour un gain de quelques lignes.
 * ========================================================================== */

@media (max-width: 480px) {
	.actu-card__link {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-12, 12px);
		padding: var(--spacing-12, 12px);
		/* En une colonne, l'egalisation des hauteurs n'a plus d'objet. La garder
		   coute un defaut visible : Chrome resout ce pourcentage sur une hauteur
		   de rangee perimee (mesuree avant le chargement des polices) et le fond
		   blanc de la carte deborde alors sur les 24px de gouttiere, ce qui colle
		   les cartes les unes aux autres. */
		height: auto;
	}
	.actu-card__link:hover,
	.actu-card__link:focus-within { transform: none; }

	.actu-card__photo {
		flex: 0 0 76px;
		aspect-ratio: 1 / 1;
		border-radius: var(--border-radius-2, 2px);
	}

	.actu-card__body {
		padding: 0;
		gap: 4px;
		justify-content: center;
	}
	.actu-card__title {
		font-size: var(--typography-paragraph-font-size-2, 16px);
		line-height: var(--typography-paragraph-line-height-2, 24px);
	}
}