/*
 * Bloc « bilan carbone » (composition one-off, page RSE). Section blanche pleine largeur, contenu contraint.
 * Trois parties empilees (en-tete, chiffres cles, actions), rythme vertical 56. Reutilise les primitives de
 * charte : eyebrow, H2, nombre Urbanist Black 54 (comme « chiffres cles »), marqueur « check » (comme .mx-list).
 */

.mx-bilan-carbone {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
	/* Ombre douce des cartes, relevee de la maquette (cote Figma). */
	--mx-bc-shadow: 4px 4px 34px rgba(220, 220, 220, 0.4);
}

.mx-bilan-carbone__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
	display: flex;
	flex-direction: column;
	gap: 56px; /* cote Figma : rythme vertical entre en-tete / chiffres / actions */
}

/* ---- 1. En-tete ---- */
.mx-bilan-carbone__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 (eyebrow -> titre) */
}

.mx-bilan-carbone__title {
	margin: 0;
	color: var(--wp--preset--color--grey-dark);
}

.mx-bilan-carbone__intro {
	margin-block-start: var(--wp--preset--spacing--20); /* +8 => 16 sous le titre (cote Figma) */
	max-width: 66ch; /* lisibilite : l'intro ne s'etale pas sur toute la largeur */
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
}

.mx-bilan-carbone__intro p { margin: 0; }

/* ---- 2. Chiffres cles : image (gauche) + colonne (droite) ---- */
.mx-bilan-carbone__chiffres {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); /* image ~630 / colonne ~546 (cote Figma) */
	gap: var(--wp--custom--gutter--columns, 56px); /* gouttiere colonnes 56 */
	align-items: center;
}

.mx-bilan-carbone__media {
	border-radius: var(--mx-radius, 8px);
	overflow: hidden;
	aspect-ratio: 630 / 512; /* ratio du frame */
}

.mx-bilan-carbone__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mx-bilan-carbone__stats {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30); /* 16 */
}

.mx-bilan-carbone__stats-intro {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
}

.mx-bilan-carbone__stats-intro p { margin: 0; }

/* Carte claire « nombre + texte ». */
.mx-bilan-carbone__card {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--mx-radius, 8px);
	box-shadow: var(--mx-bc-shadow);
	padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--50); /* 32 48 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30); /* 16 */
}

/* Grand nombre : meme style que le bloc « chiffres cles » (Urbanist Black 54, orange-dark). */
.mx-bilan-carbone__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--display); /* 54 */
	line-height: 1;
	color: var(--wp--preset--color--orange-dark);
}

.mx-bilan-carbone__card-texte {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
}

.mx-bilan-carbone__card-texte p { margin: 0; }

/* ---- 3. Actions : intro + cartes sombres ---- */
.mx-bilan-carbone__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40); /* 24 */
}

.mx-bilan-carbone__actions-intro {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
}

.mx-bilan-carbone__actions-intro p { margin: 0; }

.mx-bilan-carbone__action-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30); /* 16 */
}

/* Carte sombre : icone check + titre + texte, texte blanc. */
.mx-bilan-carbone__action {
	background-color: var(--wp--preset--color--grey-dark);
	border-radius: var(--mx-radius, 8px);
	box-shadow: var(--mx-bc-shadow);
	padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--50); /* 32 48 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30); /* 16 */
	color: var(--wp--preset--color--white);
}

.mx-bilan-carbone__action-head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20); /* 8 */
}

/* Icone « check » decorative : meme asset que le marqueur de liste (.mx-list), en masque orange. */
.mx-bilan-carbone__action-icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background-color: var(--wp--preset--color--orange-dark);
	-webkit-mask: url("../icons/Type=check.svg") no-repeat center / contain;
	mask: url("../icons/Type=check.svg") no-repeat center / contain;
}

.mx-bilan-carbone__action-titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

.mx-bilan-carbone__action-texte {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

.mx-bilan-carbone__action-texte p { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.mx-bilan-carbone__action-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mx-bilan-carbone__chiffres {
		grid-template-columns: minmax(0, 1fr); /* image empilee au-dessus de la colonne */
	}
}

@media (max-width: 680px) {
	.mx-bilan-carbone__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}
	.mx-bilan-carbone__action-cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.mx-bilan-carbone__card,
	.mx-bilan-carbone__action {
		padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--45); /* 32 32 */
	}
}