/**
 * Section « Vision 2029 / Impact à date ».
 *
 * Figma : anneau de 599 px à gauche, colonne de chiffres de 674 px à droite,
 * gouttière 26 px. Chaque groupe = un titre en capitales puis 3 cartes.
 *
 * Emplacement : assets/css/components/section-vision.css
 */

.section-vision {
	padding-block: var(--section-gap);
}

.section-vision__grille {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

/* ── Anneau et portrait ────────────────────────────────────── */

/* L'anneau reste carré ; sa largeur est bornée pour ne pas écraser la colonne
   de chiffres sur les écrans intermédiaires. */
.section-vision__anneau {
	width: 100%;
	max-width: 599px;          /* diamètre Figma */
	margin-inline: auto;
}

.section-vision__portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Colonne de chiffres ───────────────────────────────────── */

.section-vision__contenu {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.section-vision__groupe-titre {
	margin-block-end: var(--space-4);
	font-size: var(--fs-h3);   /* Figma : 24 px */
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.section-vision__groupe-titre--vision {
	color: var(--e4y-green);
}

.section-vision__groupe-titre--impact {
	color: var(--e4y-orange);
}

/* Trois cartes de hauteur égale, quelle que soit la longueur des libellés. */
.section-vision__chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: var(--space-6);       /* Figma : 32 px entre les cartes */
	align-items: stretch;
}

.section-vision__actions {
	display: flex;
}


/* Figma 01_MOB centre les deux titres de groupe et le bouton ; ce n'est
   qu'à partir de deux colonnes que la colonne de chiffres s'aligne à gauche. */
@media (max-width: 767px) {

	/* La citation qui suit arrive plus près qu'en desktop : Figma ne laisse
	   qu'une cinquantaine de pixels entre le bouton et son guillemet. */
	.section-vision {
		padding-block-end: var(--space-5);
	}

	.section-vision__groupe-titre {
		text-align: center;
	}

	.section-vision__actions {
		justify-content: center;
	}

	/* Figma étale le bouton et repousse la flèche à droite, comme celui du
	   consortium — et non un bouton compact où les deux se touchent. Sa
	   largeur est celle des cartes de chiffres : les deux s'alignent. */
	.section-vision__actions .btn {
		width: 100%;
		max-width: 220px;          /* la largeur des cartes de chiffres */
		justify-content: space-between;
	}

	/* Les cartes ne prennent pas toute la largeur : la maquette les pose sur
	   220 px au milieu de l'écran. Étirées d'un bord à l'autre, le pictogramme
	   et le filet se perdaient dans un cadre deux fois trop large. */
	.section-vision__chiffres {
		justify-items: center;
	}

	.section-vision__chiffres > * {
		width: 100%;
		max-width: 220px;   /* Figma : carte de 220 px sur une page de 402 */
	}

}


/* ============================================================
   Desktop 900px — deux colonnes
   ============================================================ */

@media (min-width: 900px) {

	/* 47 / 53 : proportions Figma (599 px et 674 px sur 1273 px). */
	.section-vision__grille {
		grid-template-columns: 47fr 53fr;
	}

}