/*
 * `blog/mots-cles` — le nuage de mots-cles du blog.
 *
 * `header_layout` = duo : le titre a gauche, le texte a droite
 * (`.ivy-head-duo`, comme `services/panneaux`).
 */
.ivy-blog--mots-cles {
	display: grid;
	gap: 2.25rem;
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--mots-cles .ivy-blog__head {
	display: grid;
	gap: 1rem;
}

.ivy-head-duo .ivy-blog--mots-cles .ivy-blog__head {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: end;
	gap: 1rem 3rem;
}

.ivy-blog--mots-cles .ivy-blog__title {
	margin: 0;
	color: var( --ivy-title-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--mots-cles .ivy-blog__lead {
	font-size: var( --ivy-font-body );
	color: var( --ivy-lead-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--mots-cles .ivy-blog__lead > * {
	margin: 0;
}

.ivy-blog--mots-cles .ivy-blog__cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-blog--mots-cles .ivy-blog__keyword {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.5rem;
	padding: 0 0.875rem;
	border-radius: var( --ivy-radius-action, 999px );
	background-color: var( --ivy-surface-soft, transparent );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	color: var( --ivy-keyword-color, var( --ivy-ink, currentColor ) );
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.ivy-blog--mots-cles .ivy-blog__keyword-count {
	opacity: 0.6;
}

.ivy-blog--mots-cles .ivy-blog__keyword:hover,
.ivy-blog--mots-cles .ivy-blog__keyword[aria-current='page'] {
	background-color: var( --ivy-accent, currentColor );
	color: var( --ivy-on-accent, canvas );
}

.ivy-blog--mots-cles .ivy-blog__actions {
	display: flex;
}

.ivy-blog--mots-cles .ivy-blog__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: 3rem;
	padding: 0.5rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var( --ivy-radius-action, 999px );
	background-color: var( --ivy-accent, currentColor );
	font-weight: 700;
	color: var( --ivy-cta-color, var( --ivy-on-accent, canvas ) );
	text-decoration: none;
}

.ivy-blog--mots-cles .ivy-blog__cta.ivy-button--icon {
	padding-inline-end: 0.5rem;
}

@media ( max-width: 800px ) {
	.ivy-head-duo .ivy-blog--mots-cles .ivy-blog__head {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-blog--mots-cles .ivy-blog__keyword {
		transition: none;
	}
}