/* Carte publication — 350 × 387. Sur-titre à 90 du haut, lien à 59 du bas,
   titre centré dans l'espace restant (y ≈ 194 dans la maquette).
   L'état foncé de la maquette est l'état survolé.

   En colonne flex et non en positionnement absolu : les titres réels vont
   jusqu'à six lignes et, en absolu, ils chevauchaient le sur-titre et le lien.
   Ici la carte s'allonge, et la rangée de grille suit. */

.card-article {
	position: relative;
	display: flex;
	flex-direction: column;
	/* La carte remplit son conteneur de grille : un titre de six lignes
	   allonge toute la rangée, et les liens des quatre cartes restent alignés. */
	height: 100%;
	min-height: clamp(16rem, 22.3958vw, 24.1875rem); /* 387 */
	border: var(--rule) solid var(--c-line);
	color: var(--c-ink);
	text-align: center;
	/* L'aplat du survol est un pseudo-élément : « isolation » garde son z-index
	   négatif dans la carte. */
	isolation: isolate;
	/* Le retard de la couleur suit la montée de l'aplat : le sur-titre est à
	   23 % du haut, que le balayage atteint vers 100 ms. Basculer plus tôt le
	   laissait clair sur clair une fraction de seconde. */
	transition: border-color var(--t), color 0.2s var(--ease) 0.1s;
}

/* L'état foncé est celui de la maquette ; seule la façon d'y arriver change :
   l'aplat monte depuis le bas au lieu de basculer d'un coup. Un « transform »
   sur un aplat de couleur, donc composé, sans repeindre la carte. Le débord
   d'un filet couvre aussi la bordure. */
.card-article::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--rule));
	z-index: -1;
	background: var(--c-deep);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 0.55s var(--ease-reveal);
}

.card-article:hover,
.card-article:focus-visible,
.card-article:focus-within {
	border-color: var(--c-deep);
	color: var(--c-light);
}

.card-article:hover::before,
.card-article:focus-visible::before,
.card-article:focus-within::before {
	transform: scaleY(1);
}

.card-article__eyebrow {
	flex: none;
	padding-top: clamp(2.5rem, 5.2083vw, 5.625rem); /* 90 */
	color: currentColor;
}

.card-article__title {
	flex: 1;
	display: grid;
	align-content: center;
	padding-top: 6px; /* centre le texte du titre sur y = 194 de la maquette */
	padding-inline: clamp(1.25rem, 2.9514vw, 3.1875rem); /* 51 */
	font-size: var(--fs-card);
	line-height: var(--lh-card);
	letter-spacing: var(--ls-card);
	overflow-wrap: break-word;
}

.card-article__cta {
	flex: none;
	padding-bottom: clamp(1.5rem, 3.4144vw, 3.6875rem); /* 59 */
}

@media (max-width: 1199px) {
	.card-article {
		min-height: 0;
	}

	.card-article__eyebrow {
		padding-top: clamp(1.5rem, 4vw, 3rem);
	}

	.card-article__title {
		padding-block: clamp(1rem, 2.5vw, 2rem);
	}

	.card-article__cta {
		padding-bottom: clamp(1.25rem, 3vw, 2.5rem);
	}
}