.ccma-inline-round-block {
	--ccma-inline-round-bg-color:
		var(--wp--preset--color--base, #f7f1e1);

	--ccma-inline-round-text-color:
		var(--wp--preset--color--vert, #6a855a);

	--ccma-inline-round-icon-color:
		var(--ccma-inline-round-text-color);

	/*
	 * Taille réellement fluide :
	 * environ 16 px sur mobile,
	 * jusqu’à environ 19 px sur grand écran.
	 */
	--ccma-inline-round-font-size:
		clamp(0.8rem, 0.94rem + 0.35vw, 1.2rem);

	--ccma-inline-round-icon-size:
		clamp(24px, 1.55em, 30px);

	--ccma-inline-round-min-height:
		clamp(44px, 2.9em, 56px);

	--ccma-inline-round-radius: 15px;

	--ccma-inline-round-padding-block:
		clamp(0.55rem, 0.45rem + 0.2vw, 0.7rem);

	--ccma-inline-round-padding-left:
		clamp(0.85rem, 0.7rem + 0.3vw, 1.1rem);

	--ccma-inline-round-padding-right:
		clamp(0.7rem, 0.6rem + 0.25vw, 0.95rem);

	--ccma-inline-round-gap:
		clamp(0.65rem, 0.45rem + 0.4vw, 1rem);

  	--ccma-inline-round-label-shift: clamp(3px, 0.065em, 7px);

	display: inline-flex;
	width: fit-content;
	max-width: 100%;

	vertical-align: middle;
	box-sizing: border-box;

	color: var(--ccma-inline-round-text-color);
	font-size: var(--ccma-inline-round-font-size);
}

.ccma-inline-round-clickable-block {
	cursor: pointer;
}

.ccma-inline-round-inner {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;

	gap: var(--ccma-inline-round-gap);

	width: 100%;
	min-width: 0;
	min-height: var(--ccma-inline-round-min-height);
	max-width: 100%;

	padding:
		var(--ccma-inline-round-padding-block)
		var(--ccma-inline-round-padding-right)
		var(--ccma-inline-round-padding-block)
		var(--ccma-inline-round-padding-left);

	border: 2px solid var(--ccma-inline-round-text-color);
	border-radius: var(--ccma-inline-round-radius);

	background-color: var(--ccma-inline-round-bg-color);
	color: var(--ccma-inline-round-text-color);

	box-sizing: border-box;
	text-decoration: none;

	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease;
}

/*
 * Variante transparente.
 */
.ccma-inline-round-variant-vert-transparent
.ccma-inline-round-inner {
	background-color: transparent;
}

/*
 * Libellé.
 *
 * Pas de padding-top ni de line-height artificiellement faible.
 * L’alignement vertical est géré par le flex du parent.
 */

.ccma-inline-round-label {
	display: inline-flex;
	align-items: center;
	flex: 1 1 auto;

	min-width: 0;
	max-width: 100%;

	margin: 0;
	padding: 0;

	font-family:
		var(--wp--preset--font-family--sagace),
		sans-serif !important;


	font-size: var(--ccma-inline-round-font-size);
	font-style: normal;
	font-weight: 400;
	font-synthesis: none;

	line-height: 1;
	letter-spacing: -0.025em;

	color: currentColor;

	white-space: normal;
	overflow-wrap: anywhere;

	/*
	 * Compensation optique des métriques verticales de Sagace.
	 */
	transform: translateY(
		var(--ccma-inline-round-label-shift)
	);
}

/*
 * Icône.
 */
.ccma-inline-round-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 var(--ccma-inline-round-icon-size);

	width: var(--ccma-inline-round-icon-size);
	height: var(--ccma-inline-round-icon-size);

	margin: 0;
	padding: 0;

	line-height: 0;
	color: var(--ccma-inline-round-icon-color);

	transform-origin: center;
	transition: transform 180ms ease;
}

/*
 * SVG ou image de l’icône.
 */
.ccma-inline-round-asset {
	display: block;

	width: 100%;
	height: 100%;

	max-width: none;
	max-height: none;

	overflow: visible;
}

/*
 * Application des couleurs du thème aux SVG.
 */
.ccma-inline-round-theme-colors
.ccma-inline-round-icon
.ccma-inline-round-asset,
.ccma-inline-round-theme-colors
.ccma-inline-round-icon
.ccma-inline-round-asset * {
	color: inherit;
}

.ccma-inline-round-theme-colors
.ccma-inline-round-icon
.ccma-inline-round-asset
[fill]:not([fill="none"]),
.ccma-inline-round-theme-colors
.ccma-inline-round-icon
.ccma-inline-round-asset
path:not([fill="none"]),
.ccma-inline-round-theme-colors
.ccma-inline-round-icon
.ccma-inline-round-asset
rect:not([fill="none"]),
.ccma-inline-round-theme-colors
.ccma-inline-round-icon
.ccma-inline-round-asset
circle:not([fill="none"]) {
	fill: currentColor !important;
}

.ccma-inline-round-theme-colors
.ccma-inline-round-icon
.ccma-inline-round-asset
[stroke]:not([stroke="none"]) {
	stroke: currentColor !important;
}

/*
 * Bouton contenant uniquement une icône.
 */
.ccma-inline-round-no-label
.ccma-inline-round-inner {
	justify-content: center;

	width: var(--ccma-inline-round-min-height);
	min-width: var(--ccma-inline-round-min-height);

	padding: 0;
}

/*
 * Survol.
 */
@media (hover: hover) and (pointer: fine) {
	.ccma-inline-round-block:hover
	.ccma-inline-round-inner {
		background-color:
			var(--ccma-inline-round-text-color);

		color:
			var(--ccma-inline-round-bg-color);

		border-color:
			var(--ccma-inline-round-bg-color);
	}

	.ccma-inline-round-block:hover
	.ccma-inline-round-icon {
		color:
			var(--ccma-inline-round-bg-color);

		transform: translateX(0.15em);
	}
}

/*
 * Navigation clavier.
 */
.ccma-inline-round-inner:focus-visible {
	outline:
		3px solid
		color-mix(
			in srgb,
			var(--ccma-inline-round-text-color) 55%,
			transparent
		);

	outline-offset: 3px;
}

/*
 * Mobile.
 */
@media (max-width: 480px) {
	.ccma-inline-round-block {
		--ccma-inline-round-font-size:
			clamp(0.8rem, 4vw, 1.1rem);

		--ccma-inline-round-icon-size:
			clamp(24px, 7vw, 28px);

		--ccma-inline-round-min-height: 48px;

		--ccma-inline-round-padding-left:
			clamp(0.8rem, 4vw, 1rem);

		--ccma-inline-round-padding-right:
			clamp(0.7rem, 3.5vw, 0.9rem);

		--ccma-inline-round-gap:
			clamp(0.55rem, 3vw, 0.8rem);
	}

	.ccma-inline-round-inner {
		max-width: 100%;
	}

	.ccma-inline-round-label {
		line-height: 1.15;
	}
}

/*
 * Respect des préférences d’accessibilité.
 */
@media (prefers-reduced-motion: reduce) {
	.ccma-inline-round-inner,
	.ccma-inline-round-icon {
		transition: none;
	}
}

/*
 * Variante blanche.
 */
.ccma-button-inline-blanc {
	--ccma-inline-round-text-color:
		var(--wp--preset--color--vert, #6a855a);

	--ccma-inline-round-icon-color:
		var(--wp--preset--color--vert, #6a855a);

	--ccma-inline-round-bg-color:
		var(--wp--preset--color--blanc, #ffffff);
}