/*
 * KMM Consulting — cards.css
 * Cartes (expertise, réalisation, secteur, domaine technique) bandeau d’appel à l’action et cycle d’intervention.
 * Chargée sur l’accueil (intégrée) et les pages de listing.
 */
@layer components {
	/* Expertise : le besoin du client d’abord. */
	.c-card-expertise {
		block-size: 100%;
	}

	.c-card-expertise__icon {
		display: inline-grid;
		place-items: center;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--radius-md);
		background-color: var(--kmm-gray-100);
		color: var(--kmm-navy);
	}

	.c-card-expertise__need {
		color: var(--color-link);
		font-weight: 600;
		line-height: 1.45;
	}

	/* Réalisation. */
	.c-card-realisation {
		block-size: 100%;
		padding: 0 0 var(--space-6);
		overflow: hidden;
	}

	.c-card-realisation > :not(.c-card-realisation__media) {
		margin-inline: var(--space-6);
	}

	.c-card-realisation__media {
		display: grid;
		place-items: center;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background-color: var(--kmm-gray-100);
	}

	.c-card-realisation__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.c-card-realisation__media .c-constellation {
		inline-size: 78%;
	}

	.c-card-realisation__meta {
		color: var(--color-text-muted);
		font-size: var(--fs-small);
	}

	/* Secteur : tuile compacte. */
	.c-card-secteur {
		block-size: 100%;
		gap: var(--space-3);
		padding: var(--space-5);
	}

	.c-card-secteur .c-card__title {
		font-size: 1.125rem;
		font-weight: 700;
	}

	.c-card-secteur .c-card__text {
		font-size: var(--fs-small);
	}

	.c-card-secteur__visual {
		color: var(--kmm-navy);
	}

	/* Domaine technique : les technologies en étiquettes. */
	.c-tech-domain {
		block-size: 100%;
	}

	.c-tech-domain .l-cluster {
		--cluster-space: var(--space-2);
		margin-block-start: auto;
	}

	/* Les listes de cartes ne portent pas de puces. */
	.l-grid[role="list"] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* ---------- Appel à l’action final ---------- */
	.c-final-cta__inner {
		display: grid;
		gap: var(--space-6);
	}

	.c-final-cta__text {
		max-inline-size: 48rem;
	}

	/* Le footer, lui aussi sur fond sombre, reste distinct du CTA final. */
	body:has(.c-final-cta) .c-site-footer {
		border-block-start: 1px solid rgb(255 255 255 / 0.14);
	}

	.c-final-cta__text {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.c-final-cta__trait {
		max-inline-size: 8rem;
	}

	.c-final-cta__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-3) var(--space-5);
	}

	.c-final-cta__actions .c-button {
		flex: 1 1 100%;
	}

	@media (min-width: 30em) {
		.c-final-cta__actions .c-button {
			flex: 0 1 auto;
		}
	}

	.c-final-cta__phone {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: var(--target-min);
		color: var(--color-text);
		font-weight: 600;
		text-decoration: none;
	}

	/* ---------- Cycle d’intervention ---------- */
	.c-cycle {
		display: grid;
		gap: var(--space-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.c-cycle__step {
		position: relative;
		display: grid;
		grid-template-columns: 2rem 1fr;
		column-gap: var(--space-4);
		align-content: start;
	}

	.c-cycle__step > :not(.c-cycle__node, .c-cycle__link) {
		grid-column: 2;
	}

	.c-cycle__node {
		grid-row: 1 / span 3;
		inline-size: 1rem;
		block-size: 1rem;
		margin: 0.2rem 0.5rem;
		border: var(--trait-width) solid var(--kmm-navy);
		border-radius: 50%;
		background-color: var(--kmm-navy);
	}

	.c-cycle__step--imagine .c-cycle__node {
		border-color: var(--kmm-gray-400);
		background-color: var(--color-bg);
	}

	.c-cycle__step--connect .c-cycle__node {
		border-color: var(--kmm-blue);
		background-color: var(--kmm-blue);
		box-shadow: 0 0 0 4px rgb(61 165 245 / 0.22);
	}

	/* Liaison entre deux étapes : verticale sur mobile, horizontale sur grand écran. */
	.c-cycle__link {
		position: absolute;
		inset-block: 1.5rem calc(-1 * var(--space-6) + 0.25rem);
		inset-inline-start: calc(1rem - 0.75px);
		inline-size: var(--trait-width);
		background: var(--kmm-navy);
	}

	.c-cycle__link--imagine {
		background: repeating-linear-gradient(180deg, var(--kmm-gray-400) 0 3px, transparent 3px 10px);
	}

	.c-cycle__number {
		color: var(--color-label);
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		font-weight: 500;
		letter-spacing: 0.08em;
	}

	.c-cycle__title {
		margin-block: var(--space-1) var(--space-2);
		font-size: var(--fs-h3);
		font-weight: 700;
	}

	.c-cycle__text {
		color: var(--color-text-muted);
	}

	/* Grand écran : étapes côte à côte, liaison horizontale. */
	@media (min-width: 64em) {
		.c-cycle {
			grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
			gap: var(--space-5);
		}

		.c-cycle__step {
			grid-template-columns: 1fr;
		}

		.c-cycle__step > :not(.c-cycle__node, .c-cycle__link) {
			grid-column: 1;
		}

		.c-cycle__node {
			grid-row: auto;
			margin: 0 0 var(--space-5);
		}

		.c-cycle__link {
			inset-block: calc(0.5rem - 0.75px) auto;
			inset-inline: 1.5rem calc(-1 * var(--space-5) + 0.25rem);
			inline-size: auto;
			block-size: var(--trait-width);
		}

		.c-cycle__link--imagine {
			background: repeating-linear-gradient(90deg, var(--kmm-gray-400) 0 3px, transparent 3px 10px);
		}
	}

	/* ---------- En-tête des pages de listing ---------- */
	.c-page-header {
		padding-block-end: var(--space-8);
		border-block-end: 1px solid var(--color-border);
	}

	.c-page-header__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		max-inline-size: 52rem;
		padding-block-start: var(--space-6);
	}

	.c-page-header__intro {
		color: var(--color-text-muted);
	}

	/* ---------- Séquence : fonds alternés automatiquement ---------- */
	.c-xp-sequence > .l-section:nth-child(even):not([data-surface]) {
		background-color: var(--color-surface-alt);
	}

	/* État vide. */
	.c-empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-5);
		max-inline-size: 36rem;
		margin-inline: auto;
		text-align: center;
	}

	.c-empty-state__trait {
		max-inline-size: 8rem;
	}

	/* ---------- Chiffres clés (vérifiés uniquement) ---------- */
	.c-figures {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		gap: var(--space-5);
		margin: var(--space-3) 0;
	}

	.c-figures__item {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--space-1);
		padding-inline-start: var(--space-4);
		border-inline-start: 2px solid var(--kmm-blue);
	}

	.c-figures__value {
		margin: 0;
		color: var(--color-heading);
		font-family: var(--font-display);
		font-size: var(--fs-h2);
		font-weight: 700;
		line-height: 1;
	}

	.c-figures__label {
		color: var(--color-text-muted);
		font-size: var(--fs-small);
	}

	/* ---------- Expertises regroupées par catégorie ---------- */
	.c-xp-groups {
		display: grid;
		gap: var(--space-8);
	}

	.c-xp-group__head {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		max-inline-size: 48rem;
		margin-block-end: var(--space-5);
		padding-block-start: var(--space-4);
		border-block-start: 1px solid var(--color-border);
	}

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

	.c-xp-group__intro {
		color: var(--color-text-muted);
	}

	.c-benefits__text--alone {
		margin-block-start: 0.4rem;
		color: var(--color-text);
		font-size: var(--fs-lead);
	}

	.c-xp-hero__image {
		inline-size: 100%;
		border-radius: var(--radius-lg);
	}
}