/* Carte service — 386 × 339, padding latéral 29. Chaque icône garde ses
   dimensions et son décalage propres, relevés sur la maquette. */

.card-service {
	position: relative;
	display: block;
	--pad: 7.51295%;      /* 29 sur une carte de 386 */
	--pad-icon: var(--pad);
	min-height: clamp(15rem, 19.6181vw, 21.1875rem); /* 339 */
	padding-inline: var(--pad);
	transition: filter var(--t);
}

.card-service:hover,
.card-service:focus-visible {
	filter: brightness(1.06);
}

.card-service--paiement {
	background: var(--c-deep);
	color: var(--c-light);
}

.card-service--outils {
	--pad: 9.32642%;      /* 36 */
	--pad-icon: 8.29016%; /* 32 */
	background: var(--c-accent);
	color: var(--c-light);
}

.card-service--tarifs {
	background: var(--c-line);
	color: var(--c-ink);
}

.card-service--fiches {
	--pad: 9.32642%;      /* 36 */
	border: var(--rule) solid var(--c-line);
	color: var(--c-ink);
}

.card-service__icon {
	display: block;
	width: auto;
	margin-left: calc(var(--pad-icon) - var(--pad));
}

.card-service__icon svg {
	width: 100%;
	height: 100%;
}

/* Hauteur commune. La maquette dessine trois icônes à ~40 (40,192 / 40,242 /
   39,919) et la calculatrice à 50 : la rangée partait de guingois. On garde le
   ratio de chaque dessin, on aligne la hauteur et donc le haut des quatre. */
.card-service__icon {
	height: clamp(2rem, 2.31481vw, 2.5rem); /* 40 */
	margin-top: clamp(2.5rem, 4.6296vw, 5rem); /* 80 */
}

.card-service--paiement .card-service__icon { aspect-ratio: 68.785 / 40.192; }
.card-service--outils   .card-service__icon { aspect-ratio: 1; }
.card-service--tarifs   .card-service__icon { aspect-ratio: 37.07 / 40.242; }
.card-service--fiches   .card-service__icon { aspect-ratio: 52.536 / 39.919; }

.card-service__title {
	position: absolute;
	top: clamp(6.5rem, 8.3333vw, 9rem); /* 144 */
	left: var(--pad);
	right: var(--pad);
	font-size: var(--fs-card);
	line-height: var(--lh-card);
	letter-spacing: var(--ls-card);
}

.card-service__text {
	position: absolute;
	top: clamp(9rem, 11.1111vw, 12rem); /* 192 */
	left: var(--pad);
	max-width: 270px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	opacity: var(--o-text);
}

.card-service__cta {
	position: absolute;
	bottom: clamp(0.5rem, 1.4468vw, 1.5625rem); /* 25 */
	left: var(--pad);
}

@media (max-width: 1199px) {
	.card-service {
		min-height: 0;
		padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4rem);
	}

	.card-service__icon {
		margin-top: 0;
	}

	.card-service__title,
	.card-service__text {
		position: static;
		left: auto;
		right: auto;
	}

	.card-service__icon { margin-left: 0; }

	.card-service__title { margin-top: clamp(1.25rem, 3vw, 2rem); }
	.card-service__text { margin-top: clamp(0.5rem, 1vw, 0.9375rem); max-width: 34ch; }

	.card-service__cta {
		bottom: clamp(0.5rem, 1.5vw, 1rem);
	}
}