/*
 * KMM Consulting — expertise.css
 * Fiche expertise et page de listing des expertises.
 */
@layer sections {
	/* ---------- En-tête de fiche (fond sombre + constellation) ---------- */
	.c-xp-hero {
		padding-block-end: var(--space-9);
	}

	.c-xp-hero .c-breadcrumb {
		--color-text-muted: var(--kmm-navy-muted);
	}

	.c-xp-hero .c-breadcrumb__item + .c-breadcrumb__item::before {
		border-color: var(--kmm-navy-muted);
	}

	.c-xp-hero__inner {
		display: grid;
		gap: var(--space-7);
		padding-block-start: var(--space-6);
	}

	@media (min-width: 64em) {
		.c-xp-hero__inner {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			align-items: center;
			gap: var(--space-9);
		}
	}

	.c-xp-hero__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
	}

	.c-xp-hero__label {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}

	.c-xp-hero__label .c-icon {
		--icon-size: 1.25rem;
	}

	/* Le besoin du client, posé juste sous le titre. */
	.c-xp-hero__need {
		max-inline-size: 32ch;
		color: var(--kmm-blue);
		font-family: var(--font-display);
		font-size: var(--fs-h3);
		font-weight: 500;
		line-height: 1.3;
	}

	.c-xp-hero__resume {
		max-inline-size: 58ch;
		color: var(--color-text-muted);
	}

	.c-xp-hero__visual {
		max-inline-size: 26rem;
	}

	@media (max-width: 63.99em) {
		.c-xp-hero__visual {
			display: none; /* Mobile : le texte d’abord, sans visuel superflu. */
		}
	}

	/* Problèmes : liste à nœuds creux (état « imaginer »). */
	.c-problems {
		display: grid;
		gap: var(--space-4);
		max-inline-size: 48rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48em) {
		.c-problems {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			max-inline-size: none;
		}
	}

	.c-problems__item {
		position: relative;
		padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 1.5rem);
		border: 1px dashed var(--kmm-gray-400);
		border-radius: var(--radius-md);
		background-color: var(--color-surface);
	}

	.c-problems__item::before {
		content: "";
		position: absolute;
		inset-block-start: calc(var(--space-5) + 0.45em);
		inset-inline-start: var(--space-5);
		inline-size: 0.75rem;
		block-size: 0.75rem;
		border: var(--trait-width) solid var(--kmm-gray-600);
		border-radius: 50%;
	}

	/* Approche : texte lisible. */
	.c-xp-approach__text {
		max-inline-size: var(--measure);
		font-size: var(--fs-lead);
		line-height: 1.6;
	}

	/* Solutions : chaque carte ouverte par un trait « construire ». */
	.c-solution__trait {
		max-inline-size: 4rem;
	}

	/* Bénéfices : liste cochée. */
	.c-benefits {
		display: grid;
		gap: var(--space-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48em) {
		.c-benefits {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.c-benefits__item {
		display: grid;
		grid-template-columns: 2.5rem 1fr;
		gap: var(--space-4);
		align-items: start;
	}

	.c-benefits__icon {
		display: inline-grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: 50%;
		background-color: var(--kmm-navy);
		color: var(--kmm-white);
	}

	.c-benefits__title {
		font-size: var(--fs-h3);
		font-weight: 700;
	}

	.c-benefits__text {
		margin-block-start: var(--space-2);
		color: var(--color-text-muted);
	}
}