/**
 * Carte actualité — photo puis bloc de texte coloré.
 *
 * Figma : carte 398 × 572 px, photo 292 px (51 %), corps 280 px (49 %).
 * La hauteur n'est jamais fixée ici : les cartes s'égalisent via le parent
 * (piste de carousel), ce qui absorbe les extraits de longueurs différentes.
 *
 * Emplacement : assets/css/components/card-actualite.css
 */

.card-actualite {
	/* width autant que height : la carte est posée dans un conteneur flex qui
	   lui laisse sa largeur de colonne, mais sans cette déclaration elle se
	   dimensionne sur son contenu. Une photographie étroite rétrécissait alors
	   toute la carte, et la rangée perdait son alignement. */
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

/* ── Photo ─────────────────────────────────────────────────── */

/* flex: none + min-height: 0 : sans eux la zone s'étire à la hauteur
   intrinsèque de l'image et l'aspect-ratio n'est plus respecté. */
.card-actualite__media {
	flex: none;
	min-height: 0;
	aspect-ratio: 398 / 292;   /* proportions Figma */
	overflow: hidden;
}

/* cover et non contain : la photo occupe toute la zone, quel que soit le
   format du fichier confié à l'équipe. */
.card-actualite__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Bloc coloré ───────────────────────────────────────────── */

.card-actualite__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-4);
	/* Figma : 36 px au-dessus du titre, autant sous le bouton. */
	padding: var(--space-6) var(--space-5);
	text-align: center;
}

.card-actualite__titre {
	font-size: var(--fs-lead);        /* Figma : 20 px */
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--color-text-inverse);
}

.card-actualite__desc {
	font-size: var(--fs-body);        /* Figma : interligne relevé à 19,5, soit ~16 px */
	line-height: var(--lh-heading);
	color: var(--color-text-inverse);
}

.card-actualite__bouton {
	align-self: center;
	margin-block-start: auto;   /* collé au bas, quelle que soit la longueur du texte */
}

/* ── Variantes de couleur ──────────────────────────────────── */

.card-actualite--orange .card-actualite__corps {
	background-color: var(--card-orange-bg);
}

.card-actualite--gold .card-actualite__corps {
	background-color: var(--card-gold-bg);
}

.card-actualite--green .card-actualite__corps {
	background-color: var(--card-green-bg);
}