/**
 * Simulateur & suivi Maritrans — feuille de style du module.
 *
 * Toutes les couleurs passent par des propriétés personnalisées, redéfinies
 * en ligne depuis les réglages : changer la charte ne demande pas de toucher
 * ce fichier. Les classes sont préfixées « mts- » pour ne jamais entrer en
 * collision avec Bootstrap (« mt- » y désigne déjà une marge haute).
 */

.mts-app {
	--mts-primary: #003a5d;
	--mts-dark: #03283f;
	--mts-accent: #ffc107;
	--mts-accent-ink: #03283f;
	--mts-radius: 6px;

	--mts-ink: #212529;
	--mts-muted: #5c6670;
	--mts-faint: #8b939c;
	--mts-surface: #ffffff;
	--mts-ground: #f6f8fa;
	--mts-raise: #eef2f5;
	--mts-line: #dde3e9;
	--mts-line-soft: #e9eef2;

	--mts-ok: #15794f;
	--mts-warn: #a5760f;
	--mts-bad: #b32d33;
	--mts-sea: var(--mts-primary);
	--mts-road: #0f7a58;
	--mts-rail: #4a5fc1;

	box-sizing: border-box;
	border: 1px solid var(--mts-line);
	border-radius: calc(var(--mts-radius) * 1.5);
	background: var(--mts-surface);
	color: var(--mts-ink);
	overflow: hidden;
	font-size: 15px;
	line-height: 1.55;
}

.mts-app *,
.mts-app *::before,
.mts-app *::after { box-sizing: border-box; }

.mts-app :focus-visible {
	outline: 2px solid var(--mts-primary);
	outline-offset: 2px;
}

/* ── section d'accueil ─────────────────────────────────────────────── */
.mts-section { padding: 40px 0 44px; background: var(--mts-ground, #f6f8fa); }
.mts-lead { max-width: 720px; margin: 0 0 16px; }
.mts-h2 {
	font-family: var(--mts-display, inherit);
	color: #03283f;
	font-weight: 700;
	margin: 0 0 12px;
}
.mts-intro { color: #5c6670; margin: 0; }

/* ── en-tête du module ─────────────────────────────────────────────── */
.mts-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 18px;
	border-bottom: 1px solid var(--mts-line);
}
.mts-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: .92rem;
	color: var(--mts-dark);
}
.mts-badge-dot {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--mts-primary);
	flex: none;
}
.mts-modes {
	margin-left: auto;
	display: flex;
	gap: 2px;
	padding: 3px;
	background: var(--mts-raise);
	border-radius: var(--mts-radius);
}
.mts-mode {
	font: inherit;
	font-size: .85rem;
	padding: 6px 15px;
	border: 0;
	border-radius: calc(var(--mts-radius) - 2px);
	background: transparent;
	color: var(--mts-muted);
	cursor: pointer;
}
.mts-mode[aria-pressed="true"] {
	background: var(--mts-surface);
	color: var(--mts-dark);
	font-weight: 600;
}

/* ── barre de recherche ────────────────────────────────────────────── */
.mts-search {
	padding: 14px 18px;
	background: var(--mts-ground);
	border-bottom: 1px solid var(--mts-line);
}
.mts-row { display: flex; gap: 9px; align-items: stretch; flex-wrap: wrap; }
.mts-field { position: relative; flex: 0 1 auto; min-width: 0; }
.mts-grow { flex: 1 1 200px; }
.mts-equip { flex: 0 1 190px; }
.mts-field > label {
	position: absolute;
	top: 6px;
	left: 13px;
	font-size: .62rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mts-faint);
	pointer-events: none;
}
.mts-input {
	width: 100%;
	font: inherit;
	font-size: .93rem;
	color: var(--mts-ink);
	background: var(--mts-surface);
	border: 1px solid var(--mts-line);
	border-radius: var(--mts-radius);
	padding: 20px 13px 7px;
	min-height: 50px;
}
/* Un select natif centre son texte verticalement et ignore le padding haut :
   le libellé flottant venait se superposer à la valeur. On neutralise donc
   l'apparence native et on redessine le chevron. */
select.mts-input {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6670' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}
select.mts-input::-ms-expand { display: none; }
.mts-input:focus { border-color: var(--mts-primary); outline: none; }

.mts-swap {
	flex: none;
	align-self: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--mts-line);
	background: var(--mts-surface);
	color: var(--mts-muted);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.mts-swap:hover { color: var(--mts-primary); border-color: var(--mts-primary); }

/* ── autocomplétion ────────────────────────────────────────────────── */
.mts-ac {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	background: var(--mts-surface);
	border: 1px solid var(--mts-line);
	border-radius: var(--mts-radius);
	box-shadow: 0 6px 20px rgba(3, 40, 63, .12);
}
.mts-ac li {
	padding: 8px 11px;
	border-radius: calc(var(--mts-radius) - 2px);
	cursor: pointer;
	font-size: .88rem;
}
.mts-ac li[aria-selected="true"],
.mts-ac li:hover { background: var(--mts-raise); }
.mts-ac .mts-ac-code { color: var(--mts-faint); font-size: .78rem; }

/* ── boutons ───────────────────────────────────────────────────────── */
.mts-btn {
	font: inherit;
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: .88rem;
	padding: 10px 20px;
	border-radius: var(--mts-radius);
	border: 1px solid transparent;
	cursor: pointer;
	min-height: 44px;
}
.mts-btn-primary { background: var(--mts-primary); border-color: var(--mts-primary); color: #fff; }
.mts-btn-primary:hover { background: var(--mts-dark); border-color: var(--mts-dark); }
.mts-btn-accent { background: var(--mts-accent); border-color: var(--mts-accent); color: var(--mts-accent-ink); }
.mts-btn-accent:hover { filter: brightness(.94); }
.mts-btn-ghost { background: transparent; border-color: var(--mts-line); color: var(--mts-ink); }
.mts-btn-ghost:hover { border-color: var(--mts-primary); color: var(--mts-primary); }
.mts-btn-sm { font-size: .82rem; padding: 7px 14px; min-height: 36px; }
.mts-btn[disabled] { opacity: .55; cursor: progress; }

/* ── tiroir d'affinage ─────────────────────────────────────────────── */
.mts-drawer {
	padding: 16px 18px;
	background: var(--mts-raise);
	border-bottom: 1px solid var(--mts-line);
}
.mts-q {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 9px 0;
	border-bottom: 1px solid var(--mts-line-soft);
}
.mts-q:last-of-type { border-bottom: 0; }
.mts-q-name { flex: 1 1 180px; font-size: .88rem; font-weight: 600; color: var(--mts-dark); }
.mts-q-w { font-weight: 400; font-size: .72rem; color: var(--mts-faint); margin-left: 7px; }
.mts-q-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.mts-opt {
	font: inherit;
	font-size: .82rem;
	padding: 6px 12px;
	border-radius: var(--mts-radius);
	border: 1px solid var(--mts-line);
	background: var(--mts-surface);
	color: var(--mts-muted);
	cursor: pointer;
	min-height: 34px;
}
.mts-opt:hover { border-color: var(--mts-primary); color: var(--mts-primary); }
.mts-opt[aria-pressed="true"] {
	background: var(--mts-primary);
	border-color: var(--mts-primary);
	color: #fff;
	font-weight: 600;
}
.mts-opt.mts-risky[aria-pressed="true"] { background: var(--mts-bad); border-color: var(--mts-bad); }

/* ── onglets ───────────────────────────────────────────────────────── */
.mts-tabs {
	display: flex;
	border-bottom: 1px solid var(--mts-line);
	overflow-x: auto;
}
.mts-tab {
	font: inherit;
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: .92rem;
	white-space: nowrap;
	padding: 12px 18px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--mts-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.mts-tab:hover { color: var(--mts-dark); }
.mts-tab[aria-selected="true"] { color: var(--mts-dark); border-bottom-color: var(--mts-accent); }
.mts-tab small { font-weight: 400; font-size: .78rem; color: var(--mts-faint); }
.mts-tab[aria-selected="true"] small { color: var(--mts-primary); }

/* ── corps ─────────────────────────────────────────────────────────── */
.mts-body { display: grid; grid-template-columns: 1fr 340px; }
.mts-pane { padding: 16px 18px; border-right: 1px solid var(--mts-line); min-width: 0; }
.mts-aside { padding: 14px 16px; background: var(--mts-ground); min-width: 0; }

.mts-lab {
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mts-faint);
	margin: 0 0 9px;
}
.mts-fine { font-size: .78rem; color: var(--mts-faint); margin: 10px 0 0; }
.mts-h3 { font-family: var(--mts-display, inherit); font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; color: var(--mts-dark); }
.mts-intro-sm { font-size: .86rem; color: var(--mts-muted); margin: 0 0 14px; }
.mts-err { margin: 10px 0 0; color: var(--mts-bad); font-size: .86rem; }
.mts-skel { color: var(--mts-faint); font-size: .88rem; }

/* ── prix ──────────────────────────────────────────────────────────── */
.mts-seg { display: flex; gap: 0; padding: 3px; background: var(--mts-raise); border-radius: var(--mts-radius); margin: 0 0 18px; flex-wrap: wrap; }
.mts-seg button {
	flex: 1 1 60px;
	font: inherit;
	font-size: .82rem;
	padding: 8px 6px;
	border: 0;
	border-radius: calc(var(--mts-radius) - 2px);
	background: transparent;
	color: var(--mts-muted);
	cursor: pointer;
	min-height: 38px;
}
.mts-seg button[aria-pressed="true"] { background: var(--mts-primary); color: #fff; font-weight: 600; }

.mts-price {
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.05;
	color: var(--mts-dark);
	font-variant-numeric: tabular-nums;
	margin: 0 0 4px;
}
.mts-price span { font-size: .38em; color: var(--mts-muted); margin-left: 6px; }
.mts-price-sub { font-size: .78rem; color: var(--mts-faint); margin: 0 0 16px; }

.mts-range { position: relative; height: 26px; margin-bottom: 7px; }
.mts-range-track { position: absolute; inset: 10px 0; background: var(--mts-raise); border-radius: 999px; }
.mts-range-fill {
	position: absolute;
	top: 6px;
	bottom: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mts-primary) 18%, transparent);
	border-left: 2px solid var(--mts-primary);
	border-right: 2px solid var(--mts-primary);
	transition: left .55s cubic-bezier(.2, .7, .2, 1), right .55s cubic-bezier(.2, .7, .2, 1);
}
.mts-range-ends { display: flex; justify-content: space-between; font-size: .82rem; font-variant-numeric: tabular-nums; }
.mts-range-ends em { font-style: normal; color: var(--mts-faint); }

.mts-fold { border-top: 1px solid var(--mts-line-soft); margin-top: 16px; }
.mts-fold summary {
	cursor: pointer;
	list-style: none;
	padding: 11px 0;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mts-muted);
	display: flex;
	align-items: center;
	gap: 8px;
}
.mts-fold summary::-webkit-details-marker { display: none; }
.mts-fold summary::before { content: "+"; color: var(--mts-primary); font-size: .95rem; }
.mts-fold[open] summary::before { content: "\2013"; }
.mts-fold summary:hover { color: var(--mts-dark); }

.mts-line { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .87rem; border-bottom: 1px solid var(--mts-line-soft); }
.mts-line:last-child { border-bottom: 0; }
.mts-line > span:first-child { color: var(--mts-muted); }
.mts-line > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mts-line-total { border-top: 1px solid var(--mts-line); border-bottom: 0; margin-top: 5px; padding-top: 10px; font-weight: 600; }
.mts-line-total > span:first-child { color: var(--mts-dark); }
.mts-line-total > span:last-child { color: var(--mts-primary); }
.mts-line-off > span:last-child { color: var(--mts-faint); font-size: .82rem; }

.mts-note {
	border-left: 3px solid var(--mts-accent);
	background: color-mix(in srgb, var(--mts-accent) 12%, transparent);
	border-radius: 0 var(--mts-radius) var(--mts-radius) 0;
	padding: 12px 15px;
	margin-top: 16px;
}
.mts-note strong { display: block; color: var(--mts-dark); font-size: .82rem; margin-bottom: 3px; }
.mts-note p { margin: 0; font-size: .84rem; color: var(--mts-muted); }
.mts-note-bad { border-left-color: var(--mts-bad); background: color-mix(in srgb, var(--mts-bad) 8%, transparent); }
.mts-note-bad strong { color: var(--mts-bad); }
.mts-note-ok { border-left-color: var(--mts-ok); background: color-mix(in srgb, var(--mts-ok) 8%, transparent); }
.mts-note-ok strong { color: var(--mts-ok); }

/* ── délai ─────────────────────────────────────────────────────────── */
.mts-durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.mts-dur { border: 1px solid var(--mts-line); border-radius: var(--mts-radius); padding: 11px 13px; }
.mts-dur-lead { border-color: var(--mts-primary); background: color-mix(in srgb, var(--mts-primary) 5%, transparent); }
.mts-dur-val {
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1;
	color: var(--mts-dark);
	font-variant-numeric: tabular-nums;
}
.mts-dur-val small { font-size: .44em; color: var(--mts-muted); margin-left: 3px; }
.mts-dur p { margin: 6px 0 0; font-size: .78rem; color: var(--mts-muted); }

.mts-bar { display: flex; height: 26px; border-radius: var(--mts-radius); overflow: hidden; background: var(--mts-raise); }
.mts-bar > span { height: 100%; }
.mts-bracket { position: relative; height: 30px; margin-top: 6px; }
.mts-bracket > span {
	position: absolute;
	top: 0;
	height: 8px;
	border: 1px solid var(--mts-faint);
	border-top: 0;
	border-radius: 0 0 3px 3px;
}
.mts-bracket em {
	position: absolute;
	top: 11px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-style: normal;
	font-size: .68rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mts-muted);
}
.mts-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 14px; }
.mts-legend > div { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .82rem; border-bottom: 1px solid var(--mts-line-soft); }
.mts-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.mts-legend span:nth-child(2) { flex: 1; color: var(--mts-muted); }
.mts-legend span:last-child { font-variant-numeric: tabular-nums; }
.mts-legend .mts-hi span:nth-child(2) { color: var(--mts-dark); font-weight: 600; }

/* ── calendrier & jalons ───────────────────────────────────────────── */
.mts-cal-ask { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.mts-steps { list-style: none; margin: 0; padding: 0; }
.mts-steps li {
	display: grid;
	grid-template-columns: 92px 14px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 9px 0;
	border-bottom: 1px solid var(--mts-line-soft);
}
.mts-steps li:last-child { border-bottom: 0; }
.mts-step-date { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--mts-ink); }
.mts-step-rail { position: relative; display: flex; justify-content: center; }
.mts-step-rail::before { content: ""; position: absolute; top: 0; bottom: -9px; width: 1px; background: var(--mts-line); }
.mts-steps li:last-child .mts-step-rail::before { display: none; }
.mts-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mts-faint); margin-top: 6px; position: relative; z-index: 2; }
.mts-steps li.mts-key .mts-step-dot { background: var(--mts-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mts-primary) 18%, transparent); }
.mts-step-name { font-size: .88rem; }
.mts-steps li.mts-key .mts-step-name { font-weight: 600; color: var(--mts-dark); }
.mts-step-who { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mts-faint); white-space: nowrap; padding-top: 3px; }
.mts-step-who.mts-you { color: var(--mts-primary); font-weight: 600; }
.mts-real .mts-step-dot { background: var(--mts-ok); }
.mts-est .mts-step-dot { background: transparent; border: 1.5px solid var(--mts-faint); }

/* ── suivi ─────────────────────────────────────────────────────────── */
.mts-vessel { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mts-vessel strong { font-family: var(--mts-display, inherit); font-weight: 700; font-size: 1.05rem; color: var(--mts-dark); display: block; }
.mts-vessel small { font-size: .74rem; color: var(--mts-faint); }
.mts-pill {
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
	border: 1px solid color-mix(in srgb, var(--mts-warn) 45%, transparent);
	background: color-mix(in srgb, var(--mts-warn) 12%, transparent);
	color: var(--mts-warn);
}
.mts-pill-ok { border-color: color-mix(in srgb, var(--mts-ok) 45%, transparent); background: color-mix(in srgb, var(--mts-ok) 10%, transparent); color: var(--mts-ok); }
.mts-etas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0; }
.mts-eta { border: 1px solid var(--mts-line); border-radius: var(--mts-radius); padding: 12px 14px; }
.mts-eta-us { border-color: var(--mts-primary); }
.mts-eta-val { font-family: var(--mts-display, inherit); font-weight: 700; font-size: 1.1rem; color: var(--mts-dark); }
.mts-eta-us .mts-eta-val { color: var(--mts-primary); }
.mts-eta p { margin: 4px 0 0; font-size: .76rem; color: var(--mts-muted); }

/* ── carte ─────────────────────────────────────────────────────────── */
.mts-map {
	position: relative;
	height: 200px;
	border: 1px solid var(--mts-line);
	border-radius: var(--mts-radius);
	background: var(--mts-raise);
	overflow: hidden;
}
.mts-map .leaflet-container { height: 100%; width: 100%; background: var(--mts-raise); font: inherit; }
.mts-map .leaflet-control-attribution { font-size: 9px; background: rgba(255, 255, 255, .78); }
.mts-map-wait {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	color: var(--mts-faint);
}
.mts-map-pin {
	display: block;
	border-radius: 50%;
	border: 2px solid var(--mts-primary);
	background: #fff;
	box-shadow: 0 1px 4px rgba(3, 40, 63, .3);
}
.mts-map-label {
	background: var(--mts-primary);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 3px;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(3, 40, 63, .25);
}
@media (max-width: 900px) { .mts-map { height: 180px; } }
.mts-legs { margin-top: 14px; }
.mts-leg { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--mts-line-soft); font-size: .82rem; }
.mts-leg:last-child { border-bottom: 0; }
.mts-leg i { width: 15px; height: 3px; border-radius: 2px; flex: none; }
.mts-leg span:nth-child(2) { flex: 1; color: var(--mts-muted); }
.mts-leg span:last-child { font-variant-numeric: tabular-nums; }

/* ── barre d'action ────────────────────────────────────────────────── */
.mts-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 18px;
	border-top: 1px solid var(--mts-line);
	background: var(--mts-ground);
}
.mts-gauge { flex: 1 1 200px; min-width: 160px; }
.mts-gauge-top { display: flex; justify-content: space-between; align-items: baseline; }
.mts-gauge-top .mts-lab { margin: 0; }
.mts-gauge-val { font-family: var(--mts-display, inherit); font-weight: 700; font-size: .88rem; color: var(--mts-primary); font-variant-numeric: tabular-nums; }
.mts-gauge-track { height: 5px; border-radius: 999px; background: var(--mts-raise); overflow: hidden; margin-top: 5px; }
.mts-gauge-fill { display: block; height: 100%; width: 10%; border-radius: 999px; background: var(--mts-primary); transition: width .55s cubic-bezier(.2, .7, .2, 1); }

/* ── déblocage ─────────────────────────────────────────────────────── */
.mts-unlock { padding: 18px; border-top: 1px solid var(--mts-line); background: var(--mts-raise); }
.mts-consent { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; font-size: .84rem; color: var(--mts-muted); }
.mts-consent input { margin: 4px 0 0; accent-color: var(--mts-primary); }
.mts-consent strong { color: var(--mts-dark); }
.mts-hp { position: absolute; left: -9999px; }
.mts-msg { margin: 12px 0 0; font-size: .86rem; }
.mts-msg-ok { color: var(--mts-ok); }
.mts-msg-bad { color: var(--mts-bad); }

.mts-foot {
	margin: 0;
	padding: 11px 18px;
	border-top: 1px solid var(--mts-line);
	font-size: .76rem;
	color: var(--mts-faint);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.mts-body { grid-template-columns: 1fr; }
	/* L'ordre d'empilement est fixé plus bas, avec le reste de l'allègement
	   mobile : le volet d'abord, la carte ensuite. */
	.mts-pane { border-right: 0; }
	.mts-durs { grid-template-columns: 1fr; }
	.mts-etas { grid-template-columns: 1fr; }
	.mts-legend { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.mts-section { padding: 30px 0 34px; }
	.mts-track-section { padding: 34px 16px 38px; }
	.mts-pane, .mts-aside { padding: 14px; }
	.mts-swap { display: none; }

	/* Sur téléphone, le module se présente tout seul : le chapô au-dessus
	   ne fait que répéter ce que les champs montrent. On garde le titre. */
	.mts-lead .mts-intro { display: none; }
	.mts-lead { margin-bottom: 12px; }
	.mts-h2 { font-size: 1.35rem; }

	/* La barre d'actions : jauge sur sa ligne, boutons pleine largeur. */
	.mts-actions { gap: 10px; padding: 12px 14px; }
	.mts-actions .mts-btn { width: 100%; }
	.mts-steps li { grid-template-columns: 80px 14px 1fr; }
	.mts-step-who { grid-column: 3; padding-top: 1px; }
}
@media (prefers-reduced-motion: reduce) {
	.mts-app * { transition: none !important; }
}

/* Périmètre couvert par le montant — jamais replié : un montant sans périmètre induit en erreur. */
.mts-scope {
	margin: 0 0 16px;
	padding: 9px 12px;
	font-size: .82rem;
	color: var(--mts-muted);
	background: var(--mts-ground);
	border-left: 3px solid var(--mts-primary);
	border-radius: 0 var(--mts-radius) var(--mts-radius) 0;
}
.mts-scope strong { color: var(--mts-dark); }

/* ══════════════════════════════════════════════════════════════════════
   Section de suivi autonome.
   Bandeau au dégradé du thème, barre de recherche large, résultat en
   carte blanche posée dessus. C'est la seule partie du plugin qui
   revendique la pleine largeur : elle doit se voir depuis le haut de page.
   ══════════════════════════════════════════════════════════════════════ */
.mts-track-section {
	--mts-primary: #003a5d;
	--mts-dark: #03283f;
	--mts-accent: #ffc107;
	--mts-accent-ink: #03283f;
	--mts-radius: 6px;
	--mts-ink: #212529;
	--mts-muted: #5c6670;
	--mts-faint: #8b939c;
	--mts-surface: #fff;
	--mts-ground: #f6f8fa;
	--mts-raise: #eef2f5;
	--mts-line: #dde3e9;
	--mts-line-soft: #e9eef2;
	--mts-ok: #15794f;
	--mts-warn: #a5760f;
	--mts-bad: #b32d33;
	--mts-sea: var(--mts-primary);
	--mts-rail: #4a5fc1;

	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	padding: 46px 20px 50px;
	background: linear-gradient(0deg, #1e5384 0%, #002648 100%);
	color: #fff;
}
.mts-track-section *,
.mts-track-section *::before,
.mts-track-section *::after { box-sizing: border-box; }
.mts-track-inner { max-width: 1140px; margin: 0 auto; }

.mts-track-head { max-width: 640px; margin: 0 0 22px; }
.mts-track-eyebrow {
	margin: 0 0 10px;
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mts-accent);
	font-weight: 700;
}
.mts-track-title {
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	margin: 0 0 12px;
	color: #fff;
}
.mts-track-sub { margin: 0; color: rgba(255, 255, 255, .78); font-size: 1rem; max-width: 56ch; }

/* ── barre de recherche ───────────────────────────────────────────── */
/* Étiquette réservée aux lecteurs d'écran. La règle manquait : le label du
   champ de suivi occupait une ligne pleine dans la barre — blanc sur blanc,
   invisible mais bien présent — et c'est lui qui gonflait le champ. */
.mts-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mts-track-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	background: #fff;
	border-radius: 999px;
	padding: 7px 7px 7px 20px;
	max-width: 720px;
	box-shadow: 0 10px 30px rgba(0, 20, 40, .28);
}
.mts-track-icon { display: flex; color: var(--mts-primary); flex: none; margin-right: 12px; }
.mts-track-input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 1.02rem;
	color: var(--mts-ink);
	background: transparent;
	border: 0;
	padding: 13px 0;
	letter-spacing: .02em;
}
.mts-track-input::placeholder { color: var(--mts-faint); letter-spacing: 0; }
.mts-track-input:focus { outline: none; }
.mts-track-bar:focus-within { box-shadow: 0 10px 30px rgba(0, 20, 40, .28), 0 0 0 3px rgba(255, 193, 7, .55); }
.mts-track-go {
	flex: none;
	font: inherit;
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: .95rem;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--mts-accent);
	color: var(--mts-accent-ink);
	cursor: pointer;
	transition: filter .18s;
}
.mts-track-go:hover { filter: brightness(.94); }
.mts-track-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mts-track-note { margin: 14px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .62); max-width: 720px; }
.mts-track-note.is-bad { color: #ffc9cb; }
.mts-track-note.is-ok { color: #9be7c4; }

/* ── carte de résultat ────────────────────────────────────────────── */
.mts-track-card {
	margin-top: 30px;
	background: #fff;
	color: var(--mts-ink);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(0, 18, 36, .3);
	animation: mts-rise .35s cubic-bezier(.2, .7, .2, 1);
}
@keyframes mts-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mts-tc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 24px;
	border-bottom: 1px solid var(--mts-line);
}
.mts-tc-ref {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem;
	letter-spacing: .06em;
	color: var(--mts-muted);
}
.mts-tc-vessel {
	display: block;
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--mts-dark);
	margin-top: 2px;
}
.mts-tc-pill {
	font-size: .68rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: 999px;
	white-space: nowrap;
	border: 1px solid color-mix(in srgb, var(--mts-warn) 45%, transparent);
	background: color-mix(in srgb, var(--mts-warn) 12%, transparent);
	color: var(--mts-warn);
}
.mts-tc-pill.is-confirmed {
	border-color: color-mix(in srgb, var(--mts-ok) 45%, transparent);
	background: color-mix(in srgb, var(--mts-ok) 10%, transparent);
	color: var(--mts-ok);
}

/* ── progression du voyage ────────────────────────────────────────── */
.mts-tc-progress { padding: 26px 24px 18px; border-bottom: 1px solid var(--mts-line); }
.mts-tc-track {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var(--mts-raise);
}
.mts-tc-done {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background: var(--mts-primary);
	width: 0;
	transition: width .8s cubic-bezier(.2, .7, .2, 1);
}
.mts-tc-ship {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--mts-primary);
	color: var(--mts-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(3, 40, 63, .22);
	transition: left .8s cubic-bezier(.2, .7, .2, 1);
}
.mts-tc-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	font-size: .82rem;
	color: var(--mts-muted);
	gap: 12px;
}
.mts-tc-ends span:last-child { text-align: right; }

/* ── corps ────────────────────────────────────────────────────────── */
.mts-tc-body { display: grid; grid-template-columns: 1fr 360px; }
.mts-tc-col { padding: 22px 24px; min-width: 0; }
.mts-tc-side { background: var(--mts-ground); border-left: 1px solid var(--mts-line); }
.mts-tc-etas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mts-tc-eta { border: 1px solid var(--mts-line); border-radius: var(--mts-radius); padding: 12px 14px; }
.mts-tc-eta .mts-lab { margin-bottom: 5px; }
.mts-tc-eta strong {
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--mts-dark);
}
.mts-tc-eta-us { border-color: var(--mts-primary); background: color-mix(in srgb, var(--mts-primary) 4%, transparent); }
.mts-tc-eta-us strong { color: var(--mts-primary); }
.mts-tc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mts-tc-actions .mts-btn { width: 100%; text-align: center; text-decoration: none; display: block; line-height: 1.4; }

@media (max-width: 900px) {
	.mts-track-section { padding: 52px 16px; }
	.mts-tc-body { grid-template-columns: 1fr; }
	.mts-tc-side { border-left: 0; border-top: 1px solid var(--mts-line); }
	.mts-tc-etas { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	/* Une seule ligne : le champ et son bouton. L'empilement d'avant
	   compensait l'étiquette fantôme, qui n'est plus là. */
	.mts-track-bar { flex-wrap: nowrap; border-radius: 999px; padding: 6px 6px 6px 16px; }
	.mts-track-input { flex: 1 1 auto; min-width: 0; font-size: .95rem; padding: 11px 0; }
	.mts-track-go { padding: 12px 20px; font-size: .88rem; }
	.mts-track-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mts-track-card { animation: none; }
	.mts-tc-done, .mts-tc-ship { transition: none; }
}

/* Les deux sections doivent se lire comme deux blocs distincts : même
   structure de titre, fonds opposés, et une ancre atteignable depuis le menu. */
.mts-eyebrow {
	margin: 0 0 10px;
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: #003a5d;
}
.mts-section { scroll-margin-top: 90px; }
.mts-track-section { scroll-margin-top: 90px; }
.mts-section + .mts-track-section { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Mouvement.

   Trois effets seulement, tous en transformations composées par le GPU :
   une apparition au défilement, une parallaxe de fond sur la section de
   suivi, et le redressement de la carte de résultat qui entre dans l'écran.
   Tout est neutralisé dès que le visiteur demande moins d'animation.
   ══════════════════════════════════════════════════════════════════════ */

/* ── décor en parallaxe, section de suivi ─────────────────────────── */
.mts-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.mts-deco > * { position: absolute; will-change: transform; }

/* Parallaxe liée au défilement, sans JavaScript. Les navigateurs qui ne
   connaissent pas animation-timeline ignorent simplement le bloc : le décor
   reste en place, rien ne casse. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mts-deco-glow, .mts-deco-route, .mts-deco-grid {
			animation: mts-parallax linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		.mts-deco-glow { --mts-shift: 46px; }
		.mts-deco-route { --mts-shift: -34px; }
		.mts-deco-grid { --mts-shift: 16px; }
	}
	@keyframes mts-parallax {
		from { transform: translate3d(0, calc(var(--mts-shift) * -1), 0); }
		to   { transform: translate3d(0, var(--mts-shift), 0); }
	}
}
.mts-deco-glow {
	top: -30%;
	right: -10%;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 193, 7, .16) 0%, rgba(255, 193, 7, 0) 68%);
}
.mts-deco-route {
	top: 12%;
	left: -8%;
	width: 116%;
	opacity: .18;
	color: #fff;
}
.mts-deco-route svg { display: block; width: 100%; height: auto; }
.mts-deco-grid {
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}
.mts-track-inner { position: relative; z-index: 1; }

/* ── apparition au défilement ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.mts-reveal {
		opacity: 0;
		transform: translate3d(0, 22px, 0);
		transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	}
	.mts-reveal.is-in { opacity: 1; transform: none; }
	.mts-reveal[data-delay="1"] { transition-delay: .08s; }
	.mts-reveal[data-delay="2"] { transition-delay: .16s; }
	.mts-reveal[data-delay="3"] { transition-delay: .24s; }

	/* Le module se redresse en entrant dans l'écran : même effet que le
	   « container scroll » d'Aceternity, obtenu par une perspective et un
	   rotateX, déclenché à l'observation plutôt que calculé à chaque défilement. */
	.mts-tilt-wrap { perspective: 1500px; }
	.mts-tilt {
		transform-origin: 50% 0%;
		transform: rotateX(11deg) scale(.965);
		opacity: .55;
		will-change: transform, opacity;
		transition: transform .95s cubic-bezier(.16, .84, .28, 1), opacity .7s ease-out;
	}
	.mts-tilt.is-in { transform: none; opacity: 1; }

	.mts-track-card { animation: mts-rise .45s cubic-bezier(.2, .7, .2, 1); }

	/* Micro-interactions : rien de gratuit, seulement du retour au geste. */
	.mts-btn, .mts-track-go, .mts-opt, .mts-tab, .mts-seg button {
		transition: background-color .18s, border-color .18s, color .18s, transform .18s, filter .18s;
	}
	.mts-btn:active, .mts-track-go:active { transform: translateY(1px); }
	.mts-dur, .mts-tc-eta { transition: border-color .25s, box-shadow .25s, transform .25s; }
	.mts-dur:hover, .mts-tc-eta:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 18px rgba(3, 40, 63, .08);
	}
	.mts-track-bar { transition: box-shadow .25s, transform .25s; }
	.mts-track-bar:focus-within { transform: translateY(-2px); }
}

/* Le navire de la barre de progression respire, discrètement. */
@media (prefers-reduced-motion: no-preference) {
	.mts-tc-ship::after {
		content: "";
		position: absolute;
		inset: -6px;
		border-radius: 50%;
		border: 2px solid var(--mts-primary);
		opacity: 0;
		animation: mts-ping 2.8s ease-out infinite;
	}
	@keyframes mts-ping {
		0% { transform: scale(.9); opacity: .5; }
		70% { transform: scale(1.5); opacity: 0; }
		100% { opacity: 0; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.mts-reveal, .mts-tilt { opacity: 1; transform: none; }
	.mts-deco { display: none; }
}

/* La colonne latérale porte un appel à l'action plutôt qu'une note explicative. */
.mts-aside-cta { margin-top: 14px; }
.mts-aside-cta .mts-btn { width: 100%; }
.mts-lead { display: flex; flex-direction: column; gap: 4px; }
.mts-lead .mts-h2 { margin: 0; }
.mts-lead .mts-intro { margin: 4px 0 0; }

/* ══════════════════════════════════════════════════════════════════════
   Correctifs mobiles.

   Sur un écran étroit, une valeur en white-space: nowrap élargit sa ligne,
   puis le module, puis le document : c'est la cause classique d'un
   défilement horizontal parasite. Et les commandes descendaient sous la
   taille tactile minimale de 44 px.
   ══════════════════════════════════════════════════════════════════════ */
.mts-app, .mts-track-section { max-width: 100%; }

@media (max-width: 640px) {
	.mts-line { align-items: flex-start; }
	.mts-line > span:last-child { white-space: normal; text-align: right; }
	.mts-range-ends { flex-wrap: wrap; gap: 4px 12px; }
	.mts-range-ends em { order: 3; width: 100%; text-align: center; }

	.mts-seg { gap: 4px; }
	.mts-seg button { min-height: 44px; flex: 1 1 62px; }
	.mts-opt { min-height: 44px; }
	.mts-btn { min-height: 46px; }
	.mts-track-go { min-height: 48px; }
	.mts-tab { padding: 14px 16px; }
	.mts-input { min-height: 52px; }

	.mts-steps li, .mts-ms li { grid-template-columns: 74px 12px 1fr; }
	.mts-fold summary { padding: 14px 0; }
}

/* Le redressement en perspective élargit la boîte projetée au-delà de sa
   largeur de mise en page : sur un écran étroit, cela crée un défilement
   horizontal pour un effet qu'on ne perçoit pas. On garde le fondu seul. */
@media (max-width: 860px) {
	.mts-tilt-wrap { perspective: none; }
	.mts-tilt { transform: none; opacity: 0; transition: opacity .6s ease-out; }
	.mts-tilt.is-in { opacity: 1; }
}

/* Posée dans un socle fourni par le thème, la section reprend ce fond au
   lieu d'imposer le sien : les deux blocs se lisent alors comme un seul. */
.tracking-band .mts-track-section { background: transparent; padding-top: 34px; }

/* ══════════════════════════════════════════════════════════════════════
   Téléphone : la même coupure que le thème (768 px), le même parti pris.

   Les deux modules se présentent tout seuls — un champ de suivi et un
   formulaire d'estimation n'ont pas besoin qu'on annonce ce qu'ils font.
   Les chapôs tombent, et l'espace qu'ils occupaient est rendu aux bords
   de section plutôt que repris.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
	.mts-section { padding: 58px 0 62px; }
	.mts-track-section,
	.tracking-band .mts-track-section { padding: 58px 16px 62px; }

	.mts-lead .mts-intro,
	.mts-track-sub { display: none; }
	.mts-lead { margin-bottom: 18px; }
	.mts-track-head { margin-bottom: 20px; }
	.mts-h2, .mts-track-title { font-size: 1.5rem; }
	.mts-track-note { font-size: .79rem; margin-top: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Formulaire de contact.

   Étiquettes posées au-dessus des champs, et non flottantes comme dans le
   simulateur : un formulaire long se remplit mieux quand l'intitulé reste
   lisible pendant la saisie. D'où la classe distincte, qui évite aussi que
   les deux mises en forme se contredisent dans la cascade.
   ══════════════════════════════════════════════════════════════════════ */

/* Les jetons, portés par le formulaire lui-même.
   Ils étaient jusqu'ici posés sur « .mts-app » et « .mts-track-section »
   seulement : le formulaire de contact, qui n'est ni l'un ni l'autre, se
   retrouvait sans bordure ni fond — des champs invisibles sur fond blanc.
   Il les déclare donc à son tour, comme les deux autres racines. */
.mts-contact {
	--mts-primary: #003a5d;
	--mts-dark: #03283f;
	--mts-accent: #ffc107;
	--mts-accent-ink: #03283f;
	--mts-radius: 6px;
	--mts-ink: #212529;
	--mts-muted: #5c6670;
	--mts-faint: #8b939c;
	--mts-surface: #fff;
	--mts-ground: #f6f8fa;
	--mts-raise: #eef2f5;
	--mts-line: #dde3e9;
	--mts-line-soft: #e9eef2;
	--mts-ok: #15794f;
	--mts-warn: #a5760f;
	--mts-bad: #b32d33;

	box-sizing: border-box;
	max-width: 760px;
	color: var(--mts-ink);
}
.mts-contact *,
.mts-contact *::before,
.mts-contact *::after { box-sizing: border-box; }
.mts-contact-form { display: block; }
.mts-contact-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}
.mts-cfield { margin: 0 0 20px; }
.mts-cfield > label {
	display: block;
	margin-bottom: 7px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--mts-dark);
}
.mts-cfield > label span { color: var(--mts-bad); }
.mts-cfield input,
.mts-cfield select,
.mts-cfield textarea {
	width: 100%;
	font: inherit;
	font-size: .95rem;
	color: var(--mts-ink);
	background: var(--mts-surface);
	border: 1px solid var(--mts-line);
	border-radius: var(--mts-radius);
	padding: 12px 14px;
	min-height: 46px;
	transition: border-color .2s, box-shadow .2s;
}
.mts-cfield textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
/* Une liste déroulante native ignore le rembourrage : on refait le chevron. */
.mts-cfield select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6670' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.mts-cfield input:focus,
.mts-cfield select:focus,
.mts-cfield textarea:focus {
	border-color: var(--mts-primary);
	box-shadow: 0 0 0 3px rgba(0, 58, 93, .12);
	outline: none;
}
.mts-cfield input:user-invalid,
.mts-cfield textarea:user-invalid { border-color: var(--mts-bad); }

.mts-consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 4px 0 26px;
	font-size: .9rem;
	color: var(--mts-muted);
}
.mts-consent input { margin-top: 4px; width: 17px; height: 17px; flex: none; accent-color: var(--mts-primary); }
.mts-consent label { cursor: pointer; }

/* La barre d'action du simulateur porte un fond et un filet haut : dans un
   formulaire posé sur une carte blanche, ils dessinent un bandeau gris qui
   n'a rien à y faire. On les retire ici, et là seulement. */
.mts-contact .mts-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border-top: 0;
	background: none;
}
.mts-contact-note { font-size: .84rem; color: var(--mts-faint); }

/* Le champ leurre : hors écran, mais accessible aux robots qui lisent le
   balisage. Ni display:none ni visibility, que certains détectent. */
.mts-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mts-contact-done,
.mts-contact-error {
	border-radius: var(--mts-radius);
	padding: 22px 24px;
	margin-bottom: 26px;
}
.mts-contact-done {
	background: rgba(21, 121, 79, .07);
	border: 1px solid rgba(21, 121, 79, .28);
}
.mts-contact-done-title {
	font-family: var(--mts-display, inherit);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--mts-ok);
	margin: 0 0 6px;
}
.mts-contact-done p:last-child { margin: 0; color: var(--mts-muted); }
.mts-contact-error {
	background: rgba(179, 45, 51, .06);
	border: 1px solid rgba(179, 45, 51, .3);
	color: var(--mts-bad);
}
.mts-contact-error p { margin: 0 0 8px; font-weight: 600; }
.mts-contact-error ul { margin: 0; padding-left: 20px; }

@media (max-width: 600px) {
	.mts-contact-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   Formulaire court.

   La version de la page d'accueil : quatre champs et un message, posés sur
   une carte. On ne demande là que de quoi rappeler quelqu'un — le dossier
   complet se remplit sur la page Contact. Les champs sont plus ramassés que
   dans la version longue : un formulaire court se lit d'un coup d'œil, et
   c'est justement ce qui le fait remplir.
   ══════════════════════════════════════════════════════════════════════ */

.mts-contact-compact { max-width: none; }
.mts-contact-compact .mts-contact-row { gap: 0 16px; }
.mts-contact-compact .mts-cfield { margin-bottom: 14px; }
.mts-contact-compact .mts-cfield > label {
	margin-bottom: 6px;
	font-size: .74rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mts-muted);
}
.mts-contact-compact .mts-cfield input,
.mts-contact-compact .mts-cfield select,
.mts-contact-compact .mts-cfield textarea {
	padding: 11px 14px;
	min-height: 46px;
	background: #fff;
	border-radius: 9px;
	transition: border-color .22s, box-shadow .22s, transform .22s;
}
.mts-contact-compact .mts-cfield textarea { min-height: 92px; }
.mts-contact-compact .mts-cfield input:focus,
.mts-contact-compact .mts-cfield select:focus,
.mts-contact-compact .mts-cfield textarea:focus {
	box-shadow: 0 0 0 3px rgba(0, 58, 93, .14), 0 8px 22px rgba(3, 40, 63, .08);
}
.mts-contact-compact .mts-consent { margin: 6px 0 18px; font-size: .84rem; line-height: 1.5; }
.mts-contact-compact .mts-actions { gap: 14px; }
.mts-contact-compact .mts-btn {
	border-radius: 999px;
	padding: 12px 30px;
	min-height: 48px;
	position: relative;
	overflow: hidden;
}
/* Un reflet traverse le bouton au survol : le geste est signalé avant
   d'être fait. Purement décoratif, donc invisible au lecteur d'écran. */
.mts-contact-compact .mts-btn::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -40%;
	width: 35%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: translateX(-120%);
	transition: transform .7s cubic-bezier(.16, .84, .28, 1);
	pointer-events: none;
}
.mts-contact-compact .mts-btn:hover::after { transform: translateX(420%); }
.mts-contact-compact .mts-contact-done,
.mts-contact-compact .mts-contact-error { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.mts-contact-compact .mts-btn::after { display: none; }
}

@media (max-width: 600px) {
	.mts-contact-compact .mts-actions { gap: 8px; }
	.mts-contact-compact .mts-btn { width: 100%; }
	.mts-contact-compact .mts-contact-note { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   Le module sur téléphone : plus court, et plus simple.

   Il occupait dix-sept cents pixels sur un écran de 390, soit deux écrans
   pour une estimation. Le remède n'est pas de tout rétrécir mais d'enlever
   ce qui se répète et de remettre côte à côte ce qui n'avait pas de raison
   d'être empilé.

   | Ce qui change                        | Gagné |
   |--------------------------------------|-------|
   | Origine et destination sur une ligne | 66 px |
   | Le second « Recevoir l'étude »       | 60 px |
   | Les incoterms sur une seule rangée   | 48 px |
   | Carte de 180 à 140 px                | 40 px |
   | La ligne « Tracé : … »               | 29 px |
   | La fourchette sur une ligne          | 22 px |
   | Barre d'action et pied resserrés     | 70 px |

   Rien n'est retiré sur grand écran : tout ce qui suit est sous 640 px,
   sauf le doublon d'appel à l'action, qui tombe dès que la colonne
   latérale passe sous le volet — c'est là qu'il fait doublon.
   ══════════════════════════════════════════════════════════════════════ */

/* L'appel à l'action de la colonne latérale double celui de la barre du
   bas dès que les deux se suivent dans le fil. Sur grand écran ils sont
   à deux endroits différents de l'œil ; empilés, c'est deux fois le même
   bouton à trente centimètres d'intervalle. */
@media (max-width: 900px) {
	.mts-aside-cta { display: none; }
	.mts-map { height: 150px; }

	/* Et la réponse passe devant l'illustration.

	   Empilée, la colonne latérale arrivait avant le volet : on cliquait
	   « Calculer » et on tombait sur une carte, le prix deux écrans plus
	   bas. Pire, la barre d'onglets — Prix, Délai, Calendrier — se
	   retrouvait séparée du volet qu'elle commande. Le volet reprend donc
	   sa place juste sous les onglets, la carte vient après. */
	.mts-pane { order: 1; border-top: 0; }
	.mts-aside { order: 2; border-top: 1px solid var(--mts-line); }
}

@media (max-width: 640px) {
	/* ── La barre de recherche ──────────────────────────────────────────
	   Origine et destination partagent une ligne : ce sont deux moitiés
	   d'une même question, et chacune tenait toute la largeur pour un mot
	   de dix caractères. Équipement et « Calculer » gardent la leur. */
	.mts-search { padding: 12px 14px; }
	.mts-row { gap: 8px; }
	.mts-grow { flex: 1 1 calc(50% - 4px); min-width: calc(50% - 4px); }
	.mts-equip { flex: 1 1 auto; }
	.mts-row > .mts-btn { flex: 0 0 auto; }
	.mts-input { min-height: 50px; font-size: .9rem; }
	.mts-field > label { font-size: .58rem; }

	/* ── Le volet ───────────────────────────────────────────────────────
	   Les cinq incoterms tiennent sur une rangée : c'est une échelle, elle
	   se lit d'un bout à l'autre, pas en deux tas. */
	.mts-seg { gap: 3px; margin-bottom: 14px; flex-wrap: nowrap; }
	.mts-seg button { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: .8rem; }

	.mts-price { font-size: 2.1rem; }
	.mts-price-sub { margin-bottom: 12px; }
	.mts-scope { margin-bottom: 12px; padding: 8px 11px; }

	/* La fourchette tient sur une ligne : deux bornes et un écart, ce sont
	   trois nombres courts — les mettre sur trois lignes leur donnait
	   l'importance d'un tableau. */
	.mts-range { height: 22px; margin-bottom: 4px; }
	.mts-range-track { inset: 8px 0; }
	.mts-range-ends { flex-wrap: nowrap; gap: 8px; font-size: .78rem; }
	.mts-range-ends em { order: 0; width: auto; text-align: center; white-space: nowrap; }

	.mts-fold { margin-top: 12px; }
	.mts-fold summary { padding: 12px 0; }

	/* ── La colonne latérale ────────────────────────────────────────────
	   La provenance du tracé est une note d'intégrateur : elle a sa place
	   sur un écran large, pas dans une lecture au pouce. */
	.mts-aside [data-role="source"] { display: none; }
	.mts-legs { margin-top: 10px; }
	.mts-leg { padding: 6px 0; }

	/* ── Onglets, barre d'action, pied ─────────────────────────────────
	   La jauge de précision tient sur une ligne : son intitulé et sa
	   valeur se lisent ensemble, la barre passe dessous. */
	.mts-tab { padding: 12px 14px; }
	.mts-actions { padding: 12px 14px; gap: 9px; }
	.mts-gauge { flex: 1 1 100%; }
	.mts-gauge-track { margin-top: 4px; }
	.mts-foot { padding: 10px 14px; gap: 4px 10px; font-size: .72rem; }
	.mts-section { padding: 24px 0 28px; }
	.mts-h2 { font-size: 1.25rem; }
}

/* La demi-largeur tient jusqu'à 340 px : l'intitulé « Destination » y
   occupe 68 des 130 pixels disponibles. En dessous, les deux champs
   reprennent chacun leur ligne plutôt que de rogner la saisie. */
@media (max-width: 339.98px) {
	.mts-grow { flex: 1 1 100%; min-width: 100%; }
}

/* Le formulaire « Recevoir cette étude », sur téléphone.

   Ses champs suivaient la règle des deux colonnes posée pour l'origine et
   la destination — deux moitiés d'une même question. Ici ce n'en est pas
   une : une adresse, un téléphone et un bouton d'envoi n'ont pas de raison
   de se partager une ligne, et le résultat était une colonne en escalier.
   Chacun prend toute la largeur, le bouton compris : c'est la dernière
   action de la carte, elle mérite la cible entière. */
@media (max-width: 640px) {
	.mts-unlock .mts-row { display: block; }
	.mts-unlock .mts-field { margin-bottom: 10px; }
	.mts-unlock .mts-grow { min-width: 0; }
	.mts-unlock .mts-btn { width: 100%; }
	.mts-unlock .mts-consent { margin-top: 14px; }
}