/**
 * Carte action — bandeau coloré puis photo carrée.
 *
 * Figma : carte 406 × 599 px, bandeau 199 px (33 %), photo 400 px (67 %).
 * La hauteur n'est pas fixée : les cartes s'égalisent via la grille parente,
 * le bandeau absorbant les accroches plus longues.
 *
 * Emplacement : assets/css/components/card-action.css
 */

.card-action {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

/* ── Bandeau coloré ────────────────────────────────────────── */

.card-action__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-7) var(--space-7) var(--space-5);
	text-align: center;
	color: var(--color-text-inverse);
}

.card-action__titre {
	font-size: var(--fs-h3);   /* Figma : 24 px */
	color: inherit;            /* sinon le vert de base.css reprend la main */
}

.card-action__texte {
	font-size: var(--fs-lead); /* Figma : 20 px */
	line-height: var(--lh-heading);
}

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

/* flex: none + min-height: 0, sinon la zone s'étire à la hauteur intrinsèque
   de l'image et l'aspect-ratio est ignoré — même piège que la carte partenaire. */
.card-action__media {
	flex: none;
	min-height: 0;
	aspect-ratio: 1 / 1;       /* Figma : photo carrée de ~400 px */
	overflow: hidden;
}

.card-action__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Variantes ─────────────────────────────────────────────── */

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

.card-action--amber {
	background-color: var(--card-amber-bg);
}

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


/* ============================================================
   Mobile — bandeau resserré

   Sur 280 px de carte, les 48 px de retrait latéral ne laissaient que 184 px
   au texte : l'accroche passait sur trois lignes et le bandeau s'allongeait
   d'autant. Figma la garde sur deux, dans un bandeau d'environ 128 px.
   ============================================================ */

@media (max-width: 767px) {

	.card-action__corps {
		gap: var(--space-4);
		padding: var(--space-6) var(--space-4) var(--space-5);
	}

	/* 16 px et non 17 : notre substitution de police rend environ 4,5 pour cent
	   plus large que celle du designer, et l accroche passait sur trois lignes
	   là où la maquette la garde sur deux. */
	.card-action__texte {
		font-size: var(--fs-body);
	}

}