/*
 * KMM Consulting — realisation.css
 * Fiche réalisation et page de listing (filtres, pagination).
 */
@layer sections {
	/* ---------- Listing : filtres ---------- */
	.c-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--space-4);
		margin-block-end: var(--space-6);
		padding: var(--space-5);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
	}

	.c-filters__field {
		display: flex;
		flex: 1 1 14rem;
		min-inline-size: 0;
		flex-direction: column;
		gap: var(--space-2);
	}

	.c-filters__field label {
		color: var(--color-heading);
		font-weight: 600;
	}

	.c-filters select {
		inline-size: 100%;
		max-inline-size: 100%;
		min-block-size: var(--target-min);
		padding: var(--space-2) var(--space-4);
		border: 1.5px solid var(--color-border-input);
		border-radius: var(--radius-md);
		background-color: var(--kmm-white);
		font-size: max(1rem, 16px);
	}

	.c-filters select:focus-visible {
		border-color: var(--color-focus);
		outline-offset: 0;
	}

	.c-filters__actions {
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.c-filters__reset {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--target-min);
	}

	.c-results-count {
		margin-block-end: var(--space-5);
		color: var(--color-text-muted);
		font-size: var(--fs-small);
	}

	/* ---------- Pagination ---------- */
	.c-pagination ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2);
		margin: var(--space-7) 0 0;
		padding: 0;
		list-style: none;
	}

	.c-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-inline-size: var(--target-min);
		min-block-size: var(--target-min);
		padding-inline: var(--space-3);
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-md);
		color: var(--kmm-navy);
		font-weight: 600;
		text-decoration: none;
	}

	.c-pagination a.page-numbers:hover {
		border-color: var(--kmm-navy);
	}

	.c-pagination .current {
		border-color: var(--kmm-navy);
		background-color: var(--kmm-navy);
		color: var(--kmm-white);
	}

	.c-pagination .dots {
		border-color: transparent;
	}

	/* ---------- Fiche : en-tête ---------- */
	.c-real-header__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		max-inline-size: 52rem;
		padding-block: var(--space-6) var(--space-7);
	}

	.c-real-header__client {
		color: var(--color-text-muted);
		font-size: var(--fs-lead);
	}

	.c-real-header__link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: var(--target-min);
		font-weight: 600;
	}

	.c-real-header__media {
		display: grid;
		place-items: center;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background-color: var(--kmm-gray-100);
	}

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

	.c-real-header__media .c-constellation {
		inline-size: min(34rem, 70%);
	}

	/* ---------- Récit : titre à gauche, texte à droite sur grand écran ---------- */
	.c-story {
		display: grid;
		gap: var(--space-7);
	}

	.c-story__block {
		display: grid;
		gap: var(--space-3);
	}

	@media (min-width: 64em) {
		.c-story__block {
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
			gap: var(--space-8);
		}
	}

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

	.c-story__text {
		max-inline-size: var(--measure);
	}

	/* ---------- Résultat ---------- */
	.c-result {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

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

	.c-result__text {
		max-inline-size: var(--measure);
		font-size: var(--fs-lead);
	}

	/* ---------- Galerie ---------- */
	.c-gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
		gap: var(--space-4);
		margin: var(--space-6) 0 0;
		padding: 0;
		list-style: none;
	}

	.c-gallery__item {
		margin: 0;
	}

	.c-gallery__link {
		display: block;
		overflow: hidden;
		border-radius: var(--radius-md);
	}

	.c-gallery__link img {
		inline-size: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		transition: transform var(--dur-base) var(--ease-out);
	}

	.c-gallery__link:hover img {
		transform: scale(1.03);
	}

	.c-gallery__caption {
		margin-block-start: var(--space-2);
		color: var(--color-text-muted);
		font-size: var(--fs-small);
	}

	/* ---------- Témoignage ---------- */
	.c-quote {
		margin: 0;
		padding-inline-start: var(--space-6);
		border-inline-start: 3px solid var(--kmm-blue);
	}

	.c-quote__text {
		margin: 0;
		color: var(--color-heading);
		font-family: var(--font-display);
		font-size: var(--fs-h3);
		font-weight: 500;
		line-height: 1.4;
	}

	.c-quote__text p::before {
		content: "« ";
	}

	.c-quote__text p::after {
		content: " »";
	}

	.c-quote__author {
		display: flex;
		flex-direction: column;
		margin-block-start: var(--space-5);
	}

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