/* Gabarit Fiches pratiques — nodes Figma (référence 1728).
   Titre 157→342, puis cinq groupes : 411→750, 841→1494, 1573→1755,
   1854→2193, 2288→2470. Les lignes réutilisent le composant fiche-row. */

.fiches > section {
	position: relative;
}

.fp-hero {
	padding-top: clamp(2.25rem, 3.99306vw, 4.3125rem); /* 69 : 157 − 88 */
	padding-left: 2.83565%;  /* 49 */
	padding-right: 2.89352%;
}

.fp-hero__title {
	max-width: 48.55740%; /* 791 sur les 1629 utiles de la section */
	font-family: var(--ff-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	color: var(--c-ink);
}

.fp-hero__intro {
	margin-top: clamp(0.5rem, 0.92593vw, 1rem); /* 16 */
	max-width: 48.55740%;                       /* 791 sur 1629 */
}

.fp-groups {
	/* 69 : 411 − 342 */
	margin-top: clamp(2.25rem, 3.99306vw, 4.3125rem);
	margin-bottom: clamp(4rem, 7.34954vw, 7.9375rem); /* 127 : 2597 − 2470 */
	padding-inline: 2.89352%;                          /* 50 → 1628 */
}

/* Les écarts entre groupes varient de 79 à 99 dans la maquette ; 91 est la
   moyenne et conserve la hauteur totale de la page. */
.fp-group + .fp-group {
	margin-top: clamp(3rem, 5.26620vw, 5.6875rem); /* 91 */
}

.fp-group__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(0.625rem, 0.86806vw, 0.9375rem); /* 15 : 230 − 215 */
}

.fp-group__badge {
	padding-block: 11px; /* hauteur fixe 33 dans la maquette */
}

/* « Voir l'expertise » : DIN Pro 20/30 souligné, à 70 % (node 586:2284). */
.fp-group__link {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
	opacity: var(--o-text);
	text-decoration: underline;
	transition: opacity var(--t-fast), color var(--t-fast);
}

.fp-group__link:hover,
.fp-group__link:focus-visible {
	opacity: 1;
	color: var(--c-accent);
}

.fp-group__grid {
	margin-top: clamp(1rem, 1.67824vw, 1.8125rem); /* 29 : 473 − 444 */
	display: grid;
	grid-template-columns: repeat(2, 48.46437%); /* 789 sur 1628 */
	column-gap: 3.07125%;                        /* 50 */
	row-gap: clamp(1.5rem, 2.14120vw, 2.3125rem); /* 37 : 630 − 593 */
}

@media (max-width: 1199px) {
	.fp-hero {
		padding-inline: var(--gutter-text);
	}

	.fp-hero__title,
	.fp-hero__intro {
		max-width: 46ch;
	}

	.fp-groups {
		padding-inline: var(--gutter-text);
	}

	.fp-group__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}