/**
 * Section « Nos actions ».
 *
 * Figma : trois cartes de ~400 px, gouttière ~22 px, CTA vert centré.
 * Le fond teinté et son arc sont portés par .zone-teinte (layout.css).
 *
 * Emplacement : assets/css/components/section-actions.css
 */

/* Peu d'air en haut : l'arc de la zone teintée démarre juste au-dessus, et
   Figma ne laisse que ~38 px entre son sommet et le titre. */
.section-actions {
	padding-block-start: var(--space-7);
	padding-block-end: var(--section-gap);
}

.section-actions__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--space-5);
	align-items: stretch;
	margin-block-start: var(--space-6);
}

.section-actions__actions {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-7);
}


/* ============================================================
   Mobile — cartes centrées sur 280 px

   Figma 01_MOB ne les étale pas d'une gouttière à l'autre : elles tiennent
   sur 271 px au milieu de l'écran, comme celles du consortium et les cartes
   de chiffres. Étirées, le titre et l'accroche se perdaient en largeur.
   ============================================================ */

@media (max-width: 767px) {

	/* La courbe de la FAQ arrive juste sous le bouton : Figma ne laisse que
	   11 px entre les deux. */
	.section-actions {
		padding-block-end: var(--space-3);
	}

	.section-actions__grille {
		justify-items: center;
	}

	.section-actions__grille > * {
		width: 100%;
		max-width: 280px;
	}

	/* Le bouton prend la largeur des cartes, comme ceux du consortium et de la
	   section vision : les trois partagent le même bord. */
	.section-actions__actions .btn {
		width: 100%;
		max-width: 280px;
		justify-content: space-between;
	}

}