/* Toutes les règles sont enveloppées dans :where() pour avoir une spécificité ZERO.
   Cela permet à Elementor (ou n'importe quel CSS de thème) de les surcharger naturellement,
   sans guerre de spécificité. C'est un "reset" / style de base seulement. */

:where(.sbd-sc-block) {
	text-align: center;
	padding: 1.5rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

:where(.sbd-sc-percent) {
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary, currentColor);
}

:where(.sbd-sc-percent-sign) {
	font-size: 0.6em;
	font-weight: 600;
	margin-left: 0.05em;
	opacity: 0.85;
}

/* Mode "% à la même taille" : annule le style esthétique du symbole.
   Spécificité plus forte (1 classe) pour battre les :where() ci-dessus. */
.sbd-sc-block--same-pct .sbd-sc-percent-sign {
	font-size: inherit;
	font-weight: inherit;
	margin-left: 0;
	opacity: 1;
}

:where(.sbd-sc-label) {
	font-size: 1rem;
	font-weight: 500;
	color: currentColor;
	opacity: 0.85;
}

:where(.sbd-sc-count, .sbd-sc-updated) {
	font-size: 0.85rem;
	color: currentColor;
	opacity: 0.65;
}

:where(.sbd-sc-error) {
	color: #b32d2e;
	border: 1px dashed #b32d2e;
	padding: 1rem;
	font-size: 0.9rem;
}