/* Chiffres clés — maquette : ronds de 358 px, alternance chiffre / photo,
   chiffre 96 px, légende 24 px. Couleurs : rose, rouge, marine, rose… */
.cci-chiffres {
	--rond: clamp(14rem, 9rem + 14vw, 22.375rem);
	--defile-gap: 0px;
	padding-top: 3.25rem;
}

.cci-rond {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.5rem;
	width: var(--rond);
	height: var(--rond);
	padding: 1.75rem;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
}

.cci-rond--rose   { background: var(--rose);   color: var(--marine); }
.cci-rond--rouge  { background: var(--rouge);  color: var(--blanc); }
.cci-rond--marine { background: var(--marine); color: var(--blanc); }
.cci-rond--creme  { background: var(--creme);  color: var(--marine); }

.cci-rond__valeur {
	font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
	font-weight: var(--fw-light);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.cci-rond__legende {
	max-width: 13em;
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
	line-height: 1.25;
}

.cci-rond--photo {
	padding: 0;
	background: var(--creme);
}

.cci-chiffres .cci-rond--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}