/* =========================================================
   MLT INCOTERMS — bande olive texturée. Schéma : étapes du trajet en
   colonnes, une barre par Incoterm (segments blancs = à notre charge,
   contours = à la charge de l'acheteur). Documents dans un panneau cerclé.
   Mobile : schéma puis documents ; ≥ 1024 px : côte à côte.
   Dépend de mlt-tokens (.mlt-olive-grain, --mlt-icone-coche).
   ========================================================= */

.mlt-incoterms {
	color: var(--mlt-color-blanc);
}

.mlt-incoterms__entete {
	max-width: 760px;
	margin-bottom: var(--mlt-space-48);
}

.mlt-incoterms__grille {
	display: grid;
	gap: var(--mlt-space-48);
}

/* ---------- Légende ---------- */
.mlt-incoterms__legende {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlt-space-8) var(--mlt-space-24);
	margin: 0 0 var(--mlt-space-24);
	font-size: var(--mlt-fs-small);
	color: var(--mlt-color-blanc-80);
}

.mlt-incoterms__legende-item {
	display: inline-flex;
	align-items: center;
	gap: var(--mlt-space-8);
}

.mlt-incoterms__legende-item::before {
	content: "";
	width: 24px;
	height: 10px;
	border-radius: var(--mlt-radius-pill);
}

.mlt-incoterms__legende-item--nous::before {
	background: var(--mlt-color-blanc);
}

.mlt-incoterms__legende-item--vous::before {
	box-shadow: inset 0 0 0 1px var(--mlt-color-blanc-80);
}

/* ---------- Trajet + barres : même grille de colonnes ---------- */
.mlt-incoterms__trajet,
.mlt-incoterms__barre {
	display: grid;
	grid-template-columns: repeat(var(--mlt-incoterms-etapes), minmax(0, 1fr));
	gap: var(--mlt-space-4);
}

.mlt-incoterms__trajet {
	margin: 0;
	padding: 0 0 var(--mlt-space-16);
	border-bottom: 1px solid var(--mlt-color-ligne-inverse);
	list-style: none;
	color: var(--mlt-color-blanc-80);
	font-size: var(--mlt-fs-xsmall);
	font-weight: 700;
	line-height: 1.3;
}

/* Libellés étroits en 320 px (« Port d'arrivée » / « Votre adresse » se touchaient) : coupure avec trait d'union */
.mlt-incoterms__trajet li {
	padding-right: var(--mlt-space-4);
	overflow-wrap: break-word;
	hyphens: auto;
}

.mlt-incoterms__liste {
	display: grid;
	gap: var(--mlt-space-32);
	margin: var(--mlt-space-32) 0 0;
	padding: 0;
	list-style: none;
}

.mlt-incoterms__titre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mlt-space-4) var(--mlt-space-16);
	margin: 0 0 var(--mlt-space-16);
}

.mlt-incoterms abbr.mlt-incoterms__code {
	/* reset.css : abbr[title] souligné en pointillés (0-1-1) */
	color: var(--mlt-color-blanc);
	font-size: var(--mlt-fs-h2);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
	cursor: help;
}

.mlt-incoterms__nom {
	color: var(--mlt-color-blanc-80);
	font-size: var(--mlt-fs-small);
}

.mlt-incoterms__segment {
	height: 10px;
	border-radius: var(--mlt-radius-pill);
	box-shadow: inset 0 0 0 1px var(--mlt-color-ligne-inverse);
}

.mlt-incoterms__segment.is-nous {
	background: var(--mlt-color-blanc);
	box-shadow: none;
}

.mlt-incoterms__texte {
	max-width: 60ch;
	margin: var(--mlt-space-16) 0 0;
	color: var(--mlt-color-blanc-80);
	font-size: var(--mlt-fs-body);
	line-height: var(--mlt-lh-body);
}

/* ---------- Documents ---------- */
.mlt-incoterms__documents {
	align-self: start;
	padding: var(--mlt-space-32) var(--mlt-space-24);
	border: 1px solid var(--mlt-color-ligne-inverse);
	border-radius: var(--mlt-radius-panel);
}

.mlt-page .mlt-incoterms__documents-titre {
	margin: 0;
	color: var(--mlt-color-blanc);
	font-size: var(--mlt-fs-lead);
	font-weight: 700;
	line-height: var(--mlt-lh-title);
}

.mlt-incoterms__documents-intro {
	margin: var(--mlt-space-8) 0 0;
	color: var(--mlt-color-blanc-80);
	font-size: var(--mlt-fs-small);
}

.mlt-incoterms__documents-liste {
	display: grid;
	gap: var(--mlt-space-16);
	margin: var(--mlt-space-24) 0 0;
	padding: 0;
	list-style: none;
}

.mlt-incoterms__documents-liste li {
	position: relative;
	padding-left: var(--mlt-space-32);
	color: var(--mlt-color-blanc);
	line-height: 1.5;
}

/* Coche blanche dans une pastille cerclée d'ocre */
.mlt-incoterms__documents-liste li::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 22px;
	height: 22px;
	border: 2px solid var(--mlt-color-ocre);
	border-radius: 50%;
}

.mlt-incoterms__documents-liste li::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 5px;
	width: 12px;
	height: 12px;
	background-color: var(--mlt-color-blanc);
	-webkit-mask: var(--mlt-icone-coche) center / contain no-repeat;
	mask: var(--mlt-icone-coche) center / contain no-repeat;
}

@media (min-width: 768px) {
	.mlt-incoterms__trajet {
		font-size: var(--mlt-fs-small);
	}

	.mlt-incoterms__segment {
		height: 12px;
	}
}

@media (min-width: 1024px) {
	.mlt-incoterms__grille {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: var(--mlt-space-64);
	}

	.mlt-incoterms__documents {
		padding: var(--mlt-space-48) var(--mlt-space-32);
	}
}