/**
 * Camembert des surfaces (form inscription exposant) — layout 2 colonnes.
 * Le conteneur vit DANS la grille GF (12 colonnes, Orbital), inséré AVANT le
 * champ 56 : colonne GAUCHE sur 2 rangées (grid-row span 2), les champs
 * 56/57 (span 6 chacun, cf. script surfaces-layout) s'empilent à DROITE par
 * auto-placement. Mobile (breakpoint GF 640px) : pleine largeur au-dessus
 * des champs. Couleurs = variables de la charte (theme.json), repli hex.
 */
.lalevee-surfchart {
	grid-column: span 6;
	grid-row: span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 12px 16px;
	/* carte : même teinte de bordure que les inputs GF Orbital voisins */
	border: 1px solid rgba(104, 110, 119, 0.35);
	border-radius: 10px;
}

.lalevee-surfchart[hidden] {
	display: none;
}

.lalevee-surfchart svg {
	width: 118px;
	height: 118px;
	flex: 0 0 auto;
}

.lalevee-surfchart-bg,
.lalevee-surfchart-arc {
	fill: none;
	stroke-width: 11;
}

.lalevee-surfchart-bg {
	stroke: var(--wp--preset--color--border-light, #e5e5e5);
}

.lalevee-surfchart-arc {
	stroke: var(--wp--preset--color--primary, #00a651);
	stroke-linecap: butt;
	transition: stroke-dasharray 0.4s ease;
}

.lalevee-surfchart-pct {
	font-size: 21px;
	font-weight: 700;
	fill: var(--wp--preset--color--main, #1a1a1a);
}

.lalevee-surfchart-sub {
	font-size: 10px;
	fill: var(--wp--preset--color--secondary, #666);
}

.lalevee-surfchart-textes {
	max-width: 15em;
}

.lalevee-surfchart-titre {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--secondary, #666);
}

.lalevee-surfchart-alerte {
	margin: 4px 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--wp--preset--color--orange-data-sombre, #f25a25);
	display: none;
}

/* État initial (aucune saisie) : anneau gris, chiffre estompé. */
.lalevee-surfchart.is-empty .lalevee-surfchart-pct {
	fill: var(--wp--preset--color--secondary, #666);
}

/* Incohérence bio > totale : alerte visuelle, non bloquante. */
.lalevee-surfchart.is-over .lalevee-surfchart-arc {
	stroke: var(--wp--preset--color--orange-data, #f89620);
}

.lalevee-surfchart.is-over .lalevee-surfchart-alerte {
	display: block;
}

@media ( max-width: 640px ) {
	.lalevee-surfchart {
		grid-column: 1 / -1;
		grid-row: auto;
		justify-content: flex-start;
		gap: 12px;
	}

	.lalevee-surfchart svg {
		width: 88px;
		height: 88px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lalevee-surfchart-arc {
		transition: none;
	}
}