/* Banner Garantie */
.cetv-banner-garantie {
	background: var(--wp--preset--color--brand-quaternary, #ebebeb);
}

.cetv-banner-garantie__container {
	padding: 30px var(--cetv-page-side-padding, 52px);
}

@media screen and (min-width: 64.0625em) {
	.cetv-banner-garantie__container {
		height: 200px;
		display: flex;
		align-items: center;
	}

	.cetv-banner-garantie__list {
		width: 100%;
	}
}

.cetv-banner-garantie__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2vw, 34px);
	margin: 0;
	padding: 0;
}

.cetv-banner-garantie__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.cetv-banner-garantie__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	color: var(--wp--preset--color--brand-secondary, #1f1f21);
}

.cetv-banner-garantie__icon img,
.cetv-banner-garantie__icon svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cetv-banner-garantie__content {
	min-width: 0;
}

.cetv-banner-garantie__title {
	margin: 0;
	color: var(--wp--preset--color--brand-secondary, #1f1f21);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.24;
}

.cetv-banner-garantie__subtitle {
	margin: 8px 0 0;
	color: rgba(31, 31, 33, 0.9);
	font-size: 18px;
	line-height: 1.35;
}

.cetv-banner-garantie__dots {
	display: none;
}

@media screen and (max-width: 90em) {
	.cetv-banner-garantie__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 64em) {
	.cetv-banner-garantie__container {
		padding: 22px var(--cetv-page-side-padding, 16px);
	}

	.cetv-banner-garantie__list {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cetv-banner-garantie__list::-webkit-scrollbar {
		display: none;
	}

	.cetv-banner-garantie__item {
		flex: 0 0 100%;
		padding: 24px 16px;
		box-sizing: border-box;
		align-items: flex-start;
		scroll-snap-align: start;
	}

	.cetv-banner-garantie__dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 14px;
	}

	.cetv-banner-garantie__dot {
		display: block;
		width: 10px;
		height: 10px;
		min-width: 10px;
		min-height: 10px;
		flex: 0 0 10px;
		border: 0;
		border-radius: 50%;
		background: rgba(31, 31, 33, 0.25);
		padding: 0;
		margin: 0;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		transition: transform 0.2s ease, background-color 0.2s ease;
	}

	.cetv-banner-garantie__dot.is-active {
		background: var(--wp--preset--color--brand-secondary, #1f1f21);
		transform: scale(1.2);
	}

	.cetv-banner-garantie__dot:hover,
	.cetv-banner-garantie__dot:focus,
	.cetv-banner-garantie__dot:active {
		background: rgba(31, 31, 33, 0.5);
		color: inherit;
	}

	.cetv-banner-garantie__dot.is-active:hover,
	.cetv-banner-garantie__dot.is-active:focus,
	.cetv-banner-garantie__dot.is-active:active {
		background: var(--wp--preset--color--brand-secondary, #1f1f21);
		color: inherit;
	}

	.cetv-banner-garantie__dot:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-primary, #ae1f23);
		outline-offset: 2px;
	}
}

@media screen and (max-width: 40em) {
	.cetv-banner-garantie__item {
		flex-basis: 100%;
	}
}