@font-face {
	font-family: "SGN Flaticon";
	src: url("../../assets/fonts/Flaticon.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

/* =========================================================
   SECTION
   ========================================================= */

.sgn-quick-services {
	margin: 0 !important;
	padding: 72px 0 78px;
	background: #071e3a;
	font-family:
		var(--wp--preset--font-family--cooper-hewitt),
		"Cooper Hewitt",
		Arial,
		sans-serif;
}

.sgn-quick-services__container {
	display: grid;
	grid-template-columns: 390px minmax(0, 1fr);
	gap: 58px;
	width: calc(100% - 96px);
	max-width: 1740px;
	margin: 0 auto;
}

/* =========================================================
   INTRO
   ========================================================= */

.sgn-quick-services__intro {
	align-self: center;
}

.sgn-quick-services__eyebrow {
	display: block;
	margin-bottom: 13px;
	color: #53a9dd;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sgn-quick-services__heading {
	max-width: 380px;
	margin: 0;
	color: #fff;
	font-size: 31px;
	font-weight: 700;
	line-height: 1.13;
}

.sgn-quick-services__separator {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 18px 0 21px;
}

.sgn-quick-services__separator span {
	width: 32px;
	height: 1px;
	background: #53a9dd;
}

.sgn-quick-services__separator i {
	width: 6px;
	height: 6px;
	border: 1px solid #53a9dd;
	border-radius: 50%;
}

.sgn-quick-services__lead {
	max-width: 360px;
	margin: 0;
	color: rgba(255, 255, 255, .66);
	font-size: 13px;
	line-height: 1.65;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.sgn-quick-services__navigation {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 34px;
}

.sgn-quick-services__arrow {
	display: grid;
	width: 40px;
	height: 40px;
	padding: 0;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .20);
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		opacity 180ms ease;
}

.sgn-quick-services__arrow:hover:not(:disabled),
.sgn-quick-services__arrow:focus-visible:not(:disabled) {
	border-color: #53a9dd;
	background: #53a9dd;
}

.sgn-quick-services__arrow:disabled {
	opacity: .25;
	cursor: default;
}

.sgn-quick-services__pagination {
	display: flex;
	align-items: center;
	gap: 7px;
}

.sgn-quick-services__dot {
	display: block;
	width: 7px;
	height: 7px;
	border: 1px solid #53a9dd;
	border-radius: 50%;
}

.sgn-quick-services__dot.is-active {
	background: #53a9dd;
}

/* =========================================================
   VIEWPORT / CAROUSEL

   Desktop :
   2 colonnes × 2 lignes = 4 services par vue.
   ========================================================= */

.sgn-quick-services__viewport {
	min-width: 0;
	overflow: hidden;
}

.sgn-quick-services__grid {
	display: grid;

	/*
	 * IMPORTANT :
	 * aucune colonne explicite.
	 * Toutes les colonnes sont générées par grid-auto-columns.
	 */
	grid-template-columns: none;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 16px) / 2);

	width: 100%;
	gap: 16px;

	transition:
		transform 320ms cubic-bezier(.22, .75, .3, 1);

	will-change: transform;
}

/* =========================================================
   CARTE
   ========================================================= */

.sgn-quick-service {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: start;
	gap: 20px;

	min-width: 0;
	min-height: 158px;

	padding: 27px 55px 25px 27px;

	box-sizing: border-box;

	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .045);

	color: #fff;
	text-decoration: none;

	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}

.sgn-quick-service:hover,
.sgn-quick-service:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #071e3a;

	transform: translateY(-2px);
}

/* =========================================================
   ICONE
   ========================================================= */

.sgn-quick-service__icon {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;

	border: 1px solid rgba(83, 169, 221, .60);
	background: rgba(83, 169, 221, .07);

	box-sizing: border-box;
}

.sgn-quick-service__glyph::before {
	display: block;

	color: #53a9dd;

	font-family: "SGN Flaticon";
	font-size: 29px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

/* Glyphes */

.sgn-quick-service__glyph--quality::before {
	content: "\f183";
}

.sgn-quick-service__glyph--clipboard::before {
	content: "\f115";
}

.sgn-quick-service__glyph--check::before {
	content: "\f149";
}

.sgn-quick-service__glyph--worldwide::before {
	content: "\f1b1";
}

.sgn-quick-service__glyph--printer::before {
	content: "\f141";
}

.sgn-quick-service__glyph--checklist::before {
	content: "\f1db";
}

.sgn-quick-service__glyph--layers::before {
	content: "\f168";
}

.sgn-quick-service__glyph--phone::before {
	content: "\f143";
}

/* =========================================================
   TEXTE
   ========================================================= */

.sgn-quick-service__content {
	min-width: 0;
}

.sgn-quick-service__title {
	margin: 2px 0 9px;

	color: inherit;

	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.sgn-quick-service__description {
	display: -webkit-box;
	overflow: hidden;

	margin: 0;

	color: rgba(255, 255, 255, .62);

	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;

	transition: color 200ms ease;
}

.sgn-quick-service:hover .sgn-quick-service__description,
.sgn-quick-service:focus-visible .sgn-quick-service__description {
	color: #68737d;
}

/* =========================================================
   FLECHE DE CARTE
   ========================================================= */

.sgn-quick-service__arrow {
	position: absolute;
	top: 22px;
	right: 22px;

	display: grid;

	width: 30px;
	height: 30px;

	place-items: center;

	border-radius: 50%;

	color: #53a9dd;

	font-size: 16px;

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

.sgn-quick-service:hover .sgn-quick-service__arrow,
.sgn-quick-service:focus-visible .sgn-quick-service__arrow {
	background: #337fc1;
	color: #fff;

	transform: translate(2px, -2px);
}

/* =========================================================
   TABLETTE
   2 services par vue : 1 colonne × 2 lignes
   ========================================================= */

@media (max-width: 1050px) {

	.sgn-quick-services__container {
		grid-template-columns: 310px minmax(0, 1fr);
		gap: 38px;

		width: calc(100% - 50px);
	}

	.sgn-quick-services__heading {
		font-size: 28px;
	}

	.sgn-quick-services__grid {
		grid-template-columns: none;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-auto-flow: column;
		grid-auto-columns: 100%;
	}

	.sgn-quick-service {
		min-height: 150px;
	}
}

/* =========================================================
   MOBILE
   1 service par vue
   ========================================================= */

@media (max-width: 700px) {

	.sgn-quick-services {
		padding: 58px 0 64px;
	}

	.sgn-quick-services__container {
		display: block;
		width: calc(100% - 30px);
	}

	.sgn-quick-services__intro {
		margin-bottom: 34px;
	}

	.sgn-quick-services__heading {
		max-width: none;
		font-size: 27px;
	}

	.sgn-quick-services__lead {
		max-width: none;
	}

	.sgn-quick-services__navigation {
		margin-top: 25px;
	}

	.sgn-quick-services__grid {
		grid-template-columns: none;
		grid-template-rows: 1fr;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		gap: 14px;
	}

	.sgn-quick-service {
		min-height: 154px;
		padding:
			25px 50px
			24px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sgn-quick-services__grid,
	.sgn-quick-service,
	.sgn-quick-service__description,
	.sgn-quick-service__arrow {
		transition: none;
	}
}

.sgn-quick-service__custom-icon {
	display: block;
	width: 31px;
	height: 31px;
	object-fit: contain;
}