/*
 * ACE — accueil : hero + demande de recherche, réassurance, derniers
 * arrivages. Mobile-first. (Feuille de section hors liste du brief §5.1 :
 * l'accueil n'y figurait pas, même logique de chargement conditionnel.)
 */

@layer ace.pages {
	/* --- Hero ---------------------------------------------------------------- */

	.ace-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ace-6);
		align-items: start;
		padding-top: var(--ace-2);
	}

	.ace-hero__pitch {
		display: flex;
		flex-direction: column;
		gap: var(--ace-5);
		min-width: 0;
	}

	.ace-hero__flag {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		align-self: flex-start;
		padding: 5px 11px;
		border-radius: 20px;
		background: var(--ace-info-bg);
		color: var(--ace-info);
		font-size: var(--ace-fs-xs);
		font-weight: 600;
	}

	.ace-hero__title {
		font-size: var(--ace-fs-h1);
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1.12;
	}

	.ace-hero__lead {
		max-width: 520px;
		font-size: 15.5px;
		line-height: 1.6;
		color: var(--ace-text-muted);
	}

	.ace-hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ace-3);
	}

	.ace-hero__stats {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ace-5) 28px;
		margin-top: var(--ace-3);
		padding-top: var(--ace-5);
		border-top: 1px solid var(--ace-rule);
	}

	.ace-hero__stat dt {
		font-size: 22px;
		font-weight: 800;
		color: var(--ace-text);
	}

	.ace-hero__stat dd {
		font-size: var(--ace-fs-xs);
		color: var(--ace-text-muted);
	}

	/* --- Demande de recherche -------------------------------------------------- */

	.ace-request {
		padding: 22px;
	}

	.ace-request__title {
		margin-bottom: 3px;
		font-size: 15px;
		font-weight: 700;
	}

	.ace-request__sub {
		margin-bottom: 18px;
		font-size: 12.5px;
		color: var(--ace-text-subtle);
	}

	.ace-request__form {
		display: flex;
		flex-direction: column;
		gap: 13px;
	}

	.ace-request__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ace-3);
	}

	.ace-request__field {
		margin: 0;
	}

	.ace-request__field label {
		display: block;
		margin-bottom: 5px;
		font-size: var(--ace-fs-xs);
		font-weight: 600;
		color: var(--ace-text-strong);
	}

	.ace-request__field textarea.ace-field {
		min-height: 72px;
		padding: 10px 12px;
		resize: none;
	}

	/* --- Réassurance ------------------------------------------------------------ */

	.ace-reassure {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ace-4);
		margin-top: 44px;
	}

	.ace-reassure__card + .ace-reassure__card {
		margin-top: 0; /* neutralise l'empilement .ace-panel + .ace-panel */
	}

	.ace-reassure__title {
		margin-bottom: 6px;
		font-size: 14px;
		font-weight: 700;
	}

	.ace-reassure__body {
		font-size: var(--ace-fs-sm);
		line-height: 1.55;
		color: var(--ace-text-muted);
	}

	/* --- Derniers arrivages ------------------------------------------------------ */

	.ace-home__loophead {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ace-3);
		align-items: flex-end;
		justify-content: space-between;
		margin: 44px 0 18px;
	}

	.ace-eyebrow[data-tight="1"] {
		margin-bottom: var(--ace-1);
	}

	.ace-home__looptitle {
		font-size: var(--ace-fs-h2);
		font-weight: 800;
	}

	/* --- Paliers ------------------------------------------------------------------ */

	@media (min-width: 768px) {
		.ace-request__row {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.ace-reassure {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 1025px) {
		.ace-hero {
			grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
			gap: var(--ace-8);
		}
	}
}