/*
 * ACE — pages de service (« Import documenté », « Livraison », « Prix et
 * paiement »). Colonne de texte + colonne latérale collante à partir de
 * 1025 px. Mobile-first, comme le reste du thème.
 */

@layer ace.pages {
	/* --- En-tête ------------------------------------------------------------ */

	.ace-service__head {
		max-width: 760px;
		margin-bottom: var(--ace-8);
	}

	.ace-service__title {
		margin: var(--ace-2) 0 var(--ace-4);
		font-size: var(--ace-fs-h1);
		font-weight: 800;
		line-height: 1.12;
		letter-spacing: -0.02em;
	}

	.ace-service__lead {
		font-size: 15.5px;
		line-height: 1.65;
		color: var(--ace-text-muted);
	}

	/* --- Colonnes ----------------------------------------------------------- */

	.ace-service__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ace-8);
		align-items: start;
	}

	.ace-service__main {
		min-width: 0;
	}

	.ace-service__section + .ace-service__section {
		margin-top: var(--ace-8);
		padding-top: var(--ace-8);
		border-top: 1px solid var(--ace-rule);
	}

	.ace-service__section-title {
		margin-bottom: var(--ace-3);
		font-size: var(--ace-fs-h3);
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.ace-service__text {
		max-width: 68ch;
		font-size: var(--ace-fs-body);
		line-height: 1.7;
		color: var(--ace-text-muted);
	}

	/* --- Liste à coches ------------------------------------------------------ */

	.ace-service__list {
		display: flex;
		flex-direction: column;
		gap: var(--ace-3);
		margin: var(--ace-5) 0 0;
		padding: 0;
		list-style: none;
	}

	.ace-service__item {
		display: flex;
		gap: 11px;
		max-width: 68ch;
		font-size: var(--ace-fs-body);
		line-height: 1.6;
		color: var(--ace-text-muted);
	}

	.ace-service__item .ace-icon {
		flex: none;
		margin-top: 3px;
		color: var(--ace-success);
	}

	.ace-service__item b {
		font-weight: 700;
		color: var(--ace-text);
	}

	/* --- Cartes (solutions de livraison) ------------------------------------- */

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

	.ace-service__card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ace-2);
	}

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

	.ace-service__card-title {
		font-size: 15px;
		font-weight: 700;
	}

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

	/* --- Étapes numérotées ---------------------------------------------------- */

	.ace-service__steps {
		counter-reset: ace-step;
		display: flex;
		flex-direction: column;
		gap: var(--ace-4);
		margin: var(--ace-5) 0 0;
		padding: 0;
		list-style: none;
	}

	.ace-service__step {
		counter-increment: ace-step;
		position: relative;
		max-width: 68ch;
		padding-left: 44px;
	}

	.ace-service__step::before {
		content: counter(ace-step);
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--ace-navy-soft);
		color: var(--ace-navy);
		font-size: var(--ace-fs-sm);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.ace-service__step-title {
		display: block;
		font-size: 14.5px;
		font-weight: 700;
		color: var(--ace-text);
	}

	.ace-service__step-text {
		display: block;
		margin-top: 3px;
		font-size: var(--ace-fs-sm);
		line-height: 1.6;
		color: var(--ace-text-muted);
	}

	/* --- Note ----------------------------------------------------------------- */

	.ace-service__note {
		max-width: 68ch;
		margin-top: var(--ace-5);
		padding: var(--ace-3) var(--ace-4);
		border-left: 3px solid var(--ace-primary);
		border-radius: 0 var(--ace-radius) var(--ace-radius) 0;
		background: var(--ace-primary-soft);
		font-size: var(--ace-fs-sm);
		line-height: 1.6;
		color: var(--ace-text-strong);
	}

	/* --- Contenu libre ajouté dans WordPress ---------------------------------- */

	.ace-service__extra {
		max-width: 68ch;
		margin-top: var(--ace-8);
		padding-top: var(--ace-8);
		border-top: 1px solid var(--ace-rule);
		font-size: var(--ace-fs-body);
		line-height: 1.7;
		color: var(--ace-text-muted);
	}

	/* --- Appel à l'action ------------------------------------------------------ */

	.ace-service__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ace-4);
		align-items: center;
		justify-content: space-between;
		margin-top: var(--ace-8);
		background: var(--ace-navy-soft);
		border-color: var(--ace-navy-border);
	}

	.ace-service__cta-text {
		max-width: 46ch;
		font-size: var(--ace-fs-sm);
		line-height: 1.55;
		color: var(--ace-text-strong);
	}

	/* --- Colonne latérale ------------------------------------------------------- */

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

	.ace-service__aside .ace-panel + .ace-panel {
		margin-top: 0;
	}

	/* .ace-eyebrow et .ace-panel__title sont des <span> : sans display bloc,
	   leurs marges verticales seraient ignorées. */
	.ace-service__head .ace-eyebrow,
	.ace-service__aside .ace-panel__title {
		display: block;
		margin-bottom: 0;
	}

	.ace-service__nav-list {
		display: flex;
		flex-direction: column;
		gap: var(--ace-1);
		margin: var(--ace-3) 0 0;
		padding: 0;
		list-style: none;
	}

	.ace-service__nav-list a {
		display: block;
		padding: 9px 11px;
		border-radius: var(--ace-radius);
		font-size: var(--ace-fs-sm);
		font-weight: 600;
		color: var(--ace-text-strong);
		text-decoration: none;
	}

	.ace-service__nav-list a:hover {
		background: var(--ace-rule-soft);
		color: var(--ace-primary-text);
	}

	.ace-service__nav-list a[aria-current="page"] {
		background: var(--ace-primary-soft);
		color: var(--ace-primary-text);
	}

	.ace-service__help-text {
		margin: var(--ace-2) 0 var(--ace-4);
		font-size: var(--ace-fs-sm);
		line-height: 1.6;
		color: var(--ace-text-muted);
	}

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

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

	@media (min-width: 1025px) {
		.ace-service__layout {
			grid-template-columns: minmax(0, 1fr) 300px;
			gap: var(--ace-12);
		}

		.ace-service__aside {
			position: sticky;
			top: var(--ace-6);
		}
	}
}