/*
Design tokens + site-wide chrome (header, mobile nav, footer, shared buttons/cards).
Every value below is transcribed verbatim from design-source/approved-design/extracted/*.dc.html
(identical across all 7 approved pages — cross-checked during full source review).
No value here is invented, rounded, or normalized. Do not add a token not present in source.
Page-section-specific CSS lives in additional files enqueued per template as pages are built.
*/

:root {
	/* Backgrounds */
	--mt-navy-1000: #04111d; /* page bg, numbers section, footer, cta gradient end */
	--mt-navy-900: #071b2b;  /* trust bar, expertise/why/process section bg, hero gradient mid */
	--mt-navy-800: #0b263b;  /* card/panel bg, hero gradient start */
	--mt-navy-800b: #0f2f47; /* icon badge bg, evolution-card bg, consulting hero inner rect */

	/* Accents */
	--mt-cyan: #42c9ef;
	--mt-cyan-hover: #169bd5;
	--mt-amber: #f3a93b;

	/* Text */
	--mt-text-white: #ffffff;
	--mt-text-body: #c8d2da;
	--mt-text-muted: #80909e;
	--mt-text-disabled: #5c6b78;

	/* Borders / hairlines (rgba, exact) */
	--mt-border-hairline-08: rgba(200,210,218,.08);
	--mt-border-hairline-1: rgba(200,210,218,.1);
	--mt-border-hairline-12: rgba(200,210,218,.12);
	--mt-border-input-default: rgba(200,210,218,.25);
	--mt-border-button: rgba(200,210,218,.35);
	--mt-border-button-40: rgba(200,210,218,.4);
	--mt-border-cyan-14: rgba(66,201,239,.14);
	--mt-border-cyan-18: rgba(66,201,239,.18);
	--mt-border-cyan-3: rgba(66,201,239,.3);
	--mt-border-cyan-35: rgba(66,201,239,.35);
	--mt-border-cyan-4: rgba(66,201,239,.4);
	--mt-border-cyan-45: rgba(66,201,239,.45);
	--mt-border-amber-4: rgba(243,169,59,.4);

	/* Fonts */
	--mt-font-heading: 'Manrope', sans-serif;
	--mt-font-body: 'Source Sans 3', sans-serif;
}

/*
Self-hosted web fonts (rules/06 — no external font CDN). Files are the
official OFL-licensed Manrope / Source Sans 3 static builds, latin subset,
limited to the exact weights this stylesheet actually uses (Manrope
700/800, Source Sans 3 400/500/600/700). See assets/fonts/LICENSES/.
*/
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/manrope-latin-800-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: var(--mt-cyan); text-decoration: none; }
a:hover { color: var(--mt-cyan-hover); }
::selection { background: var(--mt-cyan-hover); color: var(--mt-text-white); }

/* Keyframes — union of all per-page keyframes found across the 7 approved sources */
@keyframes mt-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes mt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mt-bounce { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes mt-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mt-line-draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
/* Dédouanement dossier-path: dedicated keyframe (2026-08-08) — its actual
   zigzag path length is ~517 units, not 260, so it cannot reuse mt-line-draw
   without the dash pattern wrapping and revealing out of order. */
@keyframes mt-dossier-draw { from { stroke-dashoffset: 525; } to { stroke-dashoffset: 0; } }
@keyframes mt-dot-pulse { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes mt-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mt-check-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mt-panel-emphasis { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 0 7px rgba(243,169,59,.55)); } }
@keyframes mt-tag-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes mt-gate-lift { 0%, 70%, 100% { transform: translateY(0); } 85% { transform: translateY(-22px); } }
@keyframes mt-status { 0%, 55% { fill: #f3a93b; } 75%, 100% { fill: #42c9ef; } }
@keyframes mt-move { 0%, 60% { transform: translateX(0); } 100% { transform: translateX(26px); } }
/* 2026-08-08: mt-drive / mt-route-draw redefined with a shared hold-then-loop
   timeline (0%→78% travel, 78%→100% rest at destination) so the truck and its
   route-reveal — driven by the same duration on the same path — can never
   drift apart, and the loop restarts while the truck is at rest rather than
   snapping mid-journey. See .mt-anim-drive-path / .mt-anim-route-draw. */
@keyframes mt-drive { 0% { offset-distance: 0%; } 78% { offset-distance: 100%; } 100% { offset-distance: 100%; } }
/* dashoffset base of 400, not 260: the route's true bezier length is ~394
   units (measured), and stroke-dasharray must be >= true path length or the
   dash pattern wraps and reveals out of sync with the truck (2026-08-08 fix). */
@keyframes mt-route-draw { 0% { stroke-dashoffset: 400; } 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes mt-dest-pulse { 0%, 76% { opacity: 0; r: 7; } 84% { opacity: .8; r: 14; } 94%, 100% { opacity: 0; r: 7; } }
@keyframes mt-resolve-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes mt-node-fill-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-node-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes mt-flow { 0% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: 0; } }
@keyframes mt-pulse-node { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes mt-converge { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
/* À propos hero-right ambient ripple (2026-08-08 owner-approved correction:
   replaced connected-cards concept with a circular/bubble composition). */
@keyframes mt-ripple { 0% { transform: translate(-50%,-50%) scale(.8); opacity: .5; } 70% { opacity: .12; } 100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; } }
/* Bubble float must re-apply the same translate(-50%,-50%) centering used by
   the element's static transform at every keyframe step — an animation that
   only sets translateY() would otherwise replace the static transform
   entirely once it starts, silently uncentering the bubble. */
@keyframes mt-evo-float { 0%, 100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-8px); } }
/* Contact hero "Échange direct" (2026-08-08 owner-approved correction:
   replaced the abstract 4-line convergence diagram with a request/response
   exchange around a stable central contact anchor). All four keyframes
   share one 7s cycle so the incoming bubble, reception pulse and response
   bubble stay in sync: request arrives → pulse → response leaves → both
   rest together → fade out → loop, with no visible snap at the restart. */
@keyframes mt-contact-msg-in {
	0% { opacity: 0; transform: translateX(-36px); }
	12% { opacity: 1; transform: translateX(0); }
	64% { opacity: 1; transform: translateX(0); }
	78% { opacity: 0; transform: translateX(-10px); }
	100% { opacity: 0; transform: translateX(-36px); }
}
@keyframes mt-contact-msg-out {
	0%, 32% { opacity: 0; transform: translateX(36px); }
	44% { opacity: 1; transform: translateX(0); }
	64% { opacity: 1; transform: translateX(0); }
	80% { opacity: 0; transform: translateX(10px); }
	100% { opacity: 0; transform: translateX(36px); }
}
@keyframes mt-contact-ripple {
	0%, 10% { opacity: 0; r: 34; }
	18% { opacity: .7; r: 34; }
	32%, 100% { opacity: 0; r: 58; }
}
@keyframes mt-contact-glow {
	0%, 10% { filter: none; }
	18% { filter: drop-shadow(0 0 8px rgba(66,201,239,.55)); }
	32%, 100% { filter: none; }
}

/* Focus-visible — identical rule applied globally on every approved page */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--mt-cyan);
	outline-offset: 2px;
}

/* Contact page form-control base (from Contact.dc.html) */
input, select, textarea { font-family: var(--mt-font-body); }
input::placeholder, textarea::placeholder { color: var(--mt-text-disabled); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--mt-cyan); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	/* 2026-08-08: the generic override above still leaves per-element
	   animation-delay intact, which would let staggered/looping hero
	   animations play out in a fast-forwarded but still-moving sequence.
	   These explicit resting-state overrides guarantee an immediate,
	   fully static final state as required for Consulting, Dédouanement
	   and Transport Local hero visuals. */
	.mt-anim-check-in,
	.mt-anim-node-fill,
	.mt-anim-resolve-in {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.mt-anim-panel-emphasis,
	.mt-anim-panel-emphasis--dedou {
		animation: none !important;
		filter: none !important;
	}
	.mt-anim-dossier-path {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
	.mt-anim-route-draw {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
	.mt-anim-drive-path {
		animation: none !important;
		offset-distance: 100% !important;
	}
	.mt-anim-dest-pulse {
		animation: none !important;
		opacity: 0 !important;
	}

	/* À propos hero-right bubble composition: static final state, no ripple. */
	.mt-evo__ripple {
		animation: none !important;
		opacity: 0 !important;
	}
	.mt-evo__bubble {
		animation: none !important;
		transform: translate(-50%,-50%) !important;
	}
	.mt-evo__bubble-inner {
		animation: none !important;
		opacity: 1 !important;
	}

	/* Contact hero: final "both bubbles received/answered" composition, no motion. */
	.mt-anim-contact-msg-in,
	.mt-anim-contact-msg-out {
		animation: none !important;
		opacity: 1 !important;
		transform: translateX(0) !important;
	}
	.mt-anim-contact-ripple {
		animation: none !important;
		opacity: 0 !important;
	}
	.mt-anim-contact-glow {
		animation: none !important;
		filter: none !important;
	}
}

/* ---------- Body wrap ---------- */

.mt-body-wrap {
	background: var(--mt-navy-1000);
	color: var(--mt-text-white);
	font-family: var(--mt-font-body);
	overflow-x: hidden;
	position: relative;
}

/* ---------- Header ---------- */

.mt-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 92px;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: height .35s ease, background .35s ease, border-color .35s ease;
}
.mt-header.is-scrolled {
	height: 68px;
	background: rgba(4,17,29,.85);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--mt-border-hairline-12);
}

.mt-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(20px,4vw,64px);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mt-logo-link { display: flex; align-items: center; }
.mt-logo-link img { height: clamp(48px,6vw,62px); width: auto; display: block; }

.mt-nav { display: flex; gap: 32px; align-items: center; }
.mt-nav__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--mt-text-white);
	padding: 8px 2px;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.mt-nav__link[aria-current="page"] {
	color: var(--mt-cyan);
	border-bottom-color: var(--mt-cyan);
}
.mt-nav__link--disabled {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mt-text-disabled);
	padding: 8px 2px;
	cursor: default;
}
.mt-badge-soon {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mt-amber);
	background: rgba(243,169,59,.14);
	padding: 2px 6px;
	border-radius: 2px;
}

.mt-header__actions { display: flex; align-items: center; gap: 16px; }

.mt-btn-primary {
	display: inline-block;
	background: var(--mt-amber);
	color: var(--mt-navy-1000);
	font-weight: 700;
	font-size: 15px;
	padding: 16px 30px;
	border-radius: 2px;
	border: none;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mt-btn-primary:hover, .mt-btn-primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(243,169,59,.3);
	color: var(--mt-navy-1000);
}
.mt-header .mt-btn-primary {
	font-size: 14px;
	padding: 12px 22px;
	white-space: nowrap;
}
.mt-header .mt-btn-primary:hover, .mt-header .mt-btn-primary:focus-visible {
	box-shadow: 0 10px 24px rgba(243,169,59,.28);
}

.mt-btn-secondary {
	display: inline-block;
	border: 1px solid var(--mt-border-button-40);
	color: var(--mt-text-white);
	font-weight: 600;
	font-size: 15px;
	padding: 16px 30px;
	border-radius: 2px;
	background: transparent;
	transition: border-color .2s ease, background .2s ease;
}
.mt-btn-secondary:hover, .mt-btn-secondary:focus-visible {
	border-color: var(--mt-cyan);
	background: rgba(66,201,239,.08);
	color: var(--mt-text-white);
}

.mt-hamburger {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--mt-border-button);
	border-radius: 2px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
}
.mt-hamburger__bar { width: 20px; height: 2px; background: var(--mt-text-white); display: block; }

@media (max-width: 1099px) {
	.mt-nav, .mt-header__actions .mt-btn-primary { display: none; }
	.mt-hamburger { display: flex; }
}

/* ---------- Mobile nav dialog ---------- */

.mt-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--mt-navy-1000);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .35s ease;
	visibility: hidden;
}
.mt-mobile-nav.is-open { transform: translateX(0); visibility: visible; }

.mt-mobile-nav__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px clamp(20px,6vw,40px);
}
.mt-mobile-nav__wordmark { font-family: var(--mt-font-heading); font-weight: 800; font-size: 18px; }
.mt-mobile-nav__close {
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid var(--mt-border-button);
	border-radius: 2px;
	color: var(--mt-text-white);
	font-size: 22px;
	cursor: pointer;
}

.mt-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px clamp(20px,6vw,40px);
}
.mt-mobile-nav__link {
	font-family: var(--mt-font-heading);
	font-size: clamp(22px,6vw,30px);
	font-weight: 700;
	color: var(--mt-text-white);
	padding: 14px 4px;
	border-bottom: 1px solid var(--mt-border-hairline-12);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.mt-mobile-nav__link[aria-current="page"] { color: var(--mt-cyan); }
.mt-mobile-nav__link--disabled {
	font-family: var(--mt-font-heading);
	font-size: clamp(22px,6vw,30px);
	font-weight: 700;
	color: var(--mt-text-disabled);
	padding: 14px 4px;
	border-bottom: 1px solid var(--mt-border-hairline-12);
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.mt-mobile-nav__link--disabled .mt-badge-soon { font-size: 11px; padding: 3px 8px; }
.mt-mobile-nav__cta {
	margin-top: 24px;
	text-align: center;
	font-size: 16px;
	padding: 16px 22px;
	width: 100%;
}

/* ---------- Footer ---------- */

.mt-footer {
	background: var(--mt-navy-1000);
	border-top: 1px solid var(--mt-border-hairline-1);
	padding: 80px clamp(20px,4vw,64px) 32px;
}
.mt-footer__grid {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr));
	gap: 40px;
	padding-bottom: 48px;
}
.mt-footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mt-footer__logo { height: 76px; width: auto; margin-bottom: 14px; }
/* Owner-approved revision (2026-08-08): the brand column's logo, title, and
   tagline form one centered block. On viewports wide enough for the grid to
   sit side-by-side, push that whole block down by the same amount the other
   three columns are pushed (below) so the logo's TOP never sits above the
   level where NAVIGATION/SERVICES/CONTACT begin. */
@media (min-width: 900px) {
	.mt-footer__brand { padding-top: 58px; }
	.mt-footer__col { padding-top: 58px; }
}
.mt-footer__brand-name { font-family: var(--mt-font-heading); font-weight: 800; font-size: 18px; color: var(--mt-text-white); }
.mt-footer__tagline { font-size: 14px; line-height: 1.6; color: var(--mt-text-muted); margin: 12px 0 0; max-width: 32ch; }
.mt-footer__heading { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-text-body); margin: 0 0 18px; }
.mt-footer__links { display: flex; flex-direction: column; gap: 10px; }
.mt-footer__links a, .mt-footer__links span { font-size: 14px; color: var(--mt-text-muted); }
.mt-footer__links .mt-badge-soon { font-size: 9px; letter-spacing: .05em; padding: 2px 6px; }
.mt-footer__disabled-item { display: flex; align-items: center; gap: 8px; }
.mt-footer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--mt-text-muted); }
.mt-footer__contact a { color: var(--mt-text-muted); }

.mt-footer__bottom {
	max-width: 1440px;
	margin: 0 auto;
	padding-top: 24px;
	border-top: 1px solid var(--mt-border-hairline-08);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--mt-text-muted);
}

/* ---------- Quick-contact (floating Call / WhatsApp) ----------
   Site-wide feature, not part of the approved page package: shape (circular)
   and placement (fixed, right side, vertical stack) come directly from the
   owner's revision brief. Colors/shadows/radii below reuse existing tokens
   and exact values already present elsewhere in this file (mt-cyan /
   mt-amber accent pair, the mt-navy-1000-based card shadow, the sharp 2px
   corner used by every text surface) rather than introducing anything new —
   see mt-dot--cyan/mt-dot--amber above for the same two-accent pairing used
   to distinguish two related actions. z-index 150 sits above the header
   (100) but below the mobile nav dialog (200) so opening the mobile menu
   naturally covers these buttons instead of the buttons covering the menu. */

.mt-quick-contact {
	position: fixed;
	right: clamp(14px,3vw,24px);
	bottom: calc(clamp(16px,4vh,28px) + env(safe-area-inset-bottom,0px));
	z-index: 150;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mt-quick-contact__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--mt-navy-800);
	border: 1px solid var(--mt-border-cyan-35);
	box-shadow: 0 16px 32px rgba(4,17,29,.35);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mt-quick-contact__btn svg { width: 22px; height: 22px; fill: currentColor; }

.mt-quick-contact__btn--call { color: var(--mt-cyan); }
.mt-quick-contact__btn--call:hover, .mt-quick-contact__btn--call:focus-visible {
	transform: translateY(-2px);
	border-color: var(--mt-cyan);
	box-shadow: 0 0 18px rgba(66,201,239,.4), 0 16px 32px rgba(4,17,29,.35);
}

.mt-quick-contact__btn--whatsapp { color: var(--mt-amber); border-color: var(--mt-border-amber-4); }
.mt-quick-contact__btn--whatsapp:hover, .mt-quick-contact__btn--whatsapp:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(243,169,59,.3), 0 16px 32px rgba(4,17,29,.35);
}

.mt-quick-contact__tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: var(--mt-navy-1000);
	color: var(--mt-text-white);
	font-family: var(--mt-font-body);
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 2px;
	border: 1px solid var(--mt-border-hairline-12);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.mt-quick-contact__btn:hover .mt-quick-contact__tooltip,
.mt-quick-contact__btn:focus-visible .mt-quick-contact__tooltip {
	opacity: 1;
}

@media (max-width: 560px) {
	.mt-quick-contact { gap: 12px; }
	.mt-quick-contact__btn { width: 46px; height: 46px; }
	.mt-quick-contact__btn svg { width: 20px; height: 20px; }
}

/* ---------- Shared card component ---------- */

.mt-card {
	background: var(--mt-navy-800);
	border: 1px solid var(--mt-border-cyan-14);
	border-radius: 2px;
	padding: 36px 28px;
	transition: transform .25s ease, border-color .25s ease;
}
.mt-card:hover { transform: translateY(-6px); border-color: var(--mt-border-cyan-45); }

/* ---------- Layout helpers ---------- */

.mt-container { max-width: 1440px; margin: 0 auto; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Shared section chrome ---------- */

.mt-section {
	padding: 120px clamp(20px,4vw,64px);
	max-width: 1440px;
	margin: 0 auto;
}
.mt-section--900 { background: var(--mt-navy-900); max-width: none; }
.mt-section--900 > * { max-width: 1440px; margin-left: auto; margin-right: auto; }

.mt-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mt-cyan);
	display: block;
}
.mt-eyebrow--amber { color: var(--mt-amber); }

.mt-section__head { max-width: 640px; margin: 0 auto 56px; }
.mt-section__head--center { text-align: center; }
.mt-section__title { font-family: var(--mt-font-heading); font-weight: 800; font-size: clamp(1.8rem,1.4vw + 1.4rem,2.6rem); margin: 14px 0 0 !important; color: var(--mt-text-white); }

.mt-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.mt-dot--cyan { background: var(--mt-cyan); }
.mt-dot--amber { background: var(--mt-amber); }

/* Button block-style variants (used on every page's hero + final CTA) */
.is-style-mt-primary .wp-block-button__link {
	background: var(--mt-amber);
	color: var(--mt-navy-1000);
	font-weight: 700;
	font-size: 15px;
	padding: 16px 30px;
	border-radius: 2px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.is-style-mt-primary .wp-block-button__link:hover,
.is-style-mt-primary .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(243,169,59,.3);
	color: var(--mt-navy-1000);
}
.is-style-mt-secondary .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--mt-border-button-40);
	color: var(--mt-text-white);
	font-weight: 600;
	font-size: 15px;
	padding: 16px 30px;
	border-radius: 2px;
	transition: border-color .2s ease, background .2s ease;
}
.is-style-mt-secondary .wp-block-button__link:hover,
.is-style-mt-secondary .wp-block-button__link:focus-visible {
	border-color: var(--mt-cyan);
	background: rgba(66,201,239,.08);
	color: var(--mt-text-white);
}

/* Owner-approved mobile responsive correction (2026-08-08): shared across
   every CTA button group on the site (homepage hero, inner-page heroes, the
   shared final-CTA section). When two sibling buttons wrap onto separate
   lines on mobile, each previously kept its own text-based width, so the
   pair never lined up on the same left/right edges. Below 560px, any CTA
   group that actually has more than one button (:not(:only-child) — a
   single-button hero/final-CTA is left exactly as it was) stacks in a
   column with both buttons sharing the group's full width. */
@media (max-width: 560px) {
	.mt-hero__actions,
	.mt-inner-hero__actions,
	.mt-cta-final__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.mt-hero__actions .wp-block-button:not(:only-child) .wp-block-button__link,
	.mt-inner-hero__actions .wp-block-button:not(:only-child) .wp-block-button__link,
	.mt-cta-final__actions .wp-block-button:not(:only-child) .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ---------- Homepage: Hero ---------- */

.mt-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: 140px clamp(20px,4vw,64px) 80px;
	overflow: hidden;
	background: radial-gradient(ellipse at 25% 20%, #0b263b 0%, #071b2b 45%, #04111d 100%);
}
.mt-hero__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mt-hero__glow { position: absolute; border-radius: 2px; }
.mt-hero__glow--cyan { top: 14%; left: 6%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(66,201,239,.14), transparent 70%); filter: blur(2px); }
.mt-hero__glow--amber { bottom: 8%; right: 8%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(243,169,59,.10), transparent 70%); }
.mt-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: .9; }
.mt-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, #04111d 8%, rgba(4,17,29,.55) 38%, rgba(4,17,29,.15) 62%, rgba(4,17,29,.55) 100%); }

.mt-hero__content {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0,720px);
	gap: 28px;
}
.mt-hero__title { font-family: var(--mt-font-heading); font-weight: 800; font-size: clamp(2.4rem, 3.6vw + 1.2rem, 4.6rem) !important; line-height: 1.06 !important; margin: 0 !important; text-wrap: balance; color: var(--mt-text-white) !important; }
.mt-hero__lead { font-size: clamp(17px,1.1vw + 12px,20px) !important; line-height: 1.6 !important; color: var(--mt-text-body) !important; max-width: 56ch; margin: 0 !important; text-wrap: pretty; }
.mt-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px !important; }

.mt-scroll-indicator {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--mt-text-muted);
	z-index: 1;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.mt-scroll-indicator__line { width: 1px; height: 34px; background: linear-gradient(var(--mt-cyan), transparent); animation: mt-bounce 2.2s ease-in-out infinite; display: block; }

/* Owner-approved mobile responsive correction (2026-08-08): on small
   screens the stacked eyebrow/headline/paragraph/two-CTA content, at
   desktop-proportioned padding/gaps/type size, consumed close to an entire
   mobile screen and continued below it, leaving almost none of the hero's
   background photo/gradient composition visible. .mt-hero keeps
   min-height:100svh (the full-bleed background stays full-screen) and
   stays vertically centered — only the CONTENT block's own footprint
   shrinks, so the same background composition gets materially more room
   to breathe above and below the text. Headline/paragraph/both CTAs and
   the background image are all preserved; nothing is removed or cropped. */
@media (max-width: 600px) {
	.mt-hero { padding: 124px clamp(20px,4vw,64px) 56px; }
	.mt-hero__content { gap: 18px; }
	.mt-hero__title { font-size: clamp(2rem, 8vw, 2.6rem) !important; line-height: 1.15 !important; }
	.mt-hero__lead { line-height: 1.5 !important; }
	.mt-hero__actions { gap: 12px; margin-top: 4px !important; }
	.mt-hero .is-style-mt-primary .wp-block-button__link,
	.mt-hero .is-style-mt-secondary .wp-block-button__link {
		padding: 14px 26px;
	}
	.mt-scroll-indicator { bottom: 16px; }
	.mt-scroll-indicator__line { height: 24px; }
}

/* ---------- Homepage: Trust ---------- */

.mt-trust { background: var(--mt-navy-900); border-top: 1px solid var(--mt-border-hairline-08); border-bottom: 1px solid var(--mt-border-hairline-08); padding: 32px clamp(20px,4vw,64px); }
.mt-trust__list { max-width: 1440px; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: center; }
.mt-trust__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mt-text-body); font-weight: 500; }

/* Owner-approved mobile responsive correction (2026-08-08): the centered
   flex-wrap layout gave each wrapped row a different starting x-position
   depending on that line's item widths, so the cyan dots and text never
   lined up between rows. Below 700px the list becomes a single column —
   one fixed bullet column + one flexible text column, structurally
   consistent on every row — instead of centering the flex-wrap. */
@media (max-width: 700px) {
	.mt-trust__list { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Homepage: Services ---------- */

.mt-services__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 24px; }
.mt-services__card h3 { font-family: var(--mt-font-heading); font-size: 19px; font-weight: 700; margin: 22px 0 10px; color: var(--mt-text-white); }
.mt-services__card p { font-size: 15px; line-height: 1.6; color: var(--mt-text-body); margin: 0 0 20px; }
.mt-services__card a { font-size: 14px; font-weight: 600; color: var(--mt-cyan); }

/* ---------- Homepage: Expertise ---------- */

.mt-expertise__grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(320px,100%),1fr)); gap: 56px; align-items: start; }
.mt-expertise__text { border-left: 2px solid var(--mt-cyan); padding-left: 28px; }
.mt-expertise__lead { font-size: 16px !important; line-height: 1.7 !important; color: var(--mt-text-body) !important; max-width: 52ch; margin: 20px 0 0 !important; }
.mt-expertise__pillars { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.mt-pillar {
	/* min-width:0 (2026-08-08, non-visual technical fix): a grid item's
	   default min-width:auto keeps it from shrinking below its own text's
	   min-content width, which at narrow mobile widths pushed this fixed
	   2-column grid wider than its container and clipped the right column
	   off-screen. min-width:0 lets the card shrink and its text wrap
	   normally instead, with no visible effect at any width where it
	   already fit. */
	min-width: 0;
	background: var(--mt-navy-800);
	border: 1px solid var(--mt-border-hairline-1);
	border-radius: 2px;
	padding: 26px 22px;
	transform: translateY(var(--mt-offset,0px));
	transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.mt-pillar:hover { transform: translateY(calc(var(--mt-offset,0px) - 6px)); border-color: var(--mt-border-cyan-4); background: #0d2c44; }
.mt-pillar .mt-dot { margin-bottom: 16px; transition: transform .3s ease, box-shadow .3s ease; }
.mt-pillar:hover .mt-dot--cyan { transform: scale(1.6); box-shadow: 0 0 12px var(--mt-cyan); }
.mt-pillar:hover .mt-dot--amber { transform: scale(1.6); box-shadow: 0 0 12px var(--mt-amber); }
.mt-pillar h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--mt-text-white); }
.mt-pillar p { font-size: 13.5px; line-height: 1.55; color: var(--mt-text-muted); margin: 0; }

/* ---------- Homepage: Numbers ---------- */

.mt-numbers { padding: 100px clamp(20px,4vw,64px); background: var(--mt-navy-1000); max-width: none; }
.mt-numbers__grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); gap: 32px; text-align: center; }
.mt-numbers__value { font-family: var(--mt-font-heading); font-weight: 800; font-size: clamp(2.4rem,3vw,3.6rem); color: var(--mt-cyan); min-width: 5ch; display: inline-block; transition: transform .4s ease, filter .4s ease; }
.mt-numbers__value--text { font-size: clamp(1.4rem,1.6vw + .8rem,2rem); color: var(--mt-text-white); min-width: 0; }
.mt-numbers__suffix { font-size: .5em; }
.mt-numbers__label { font-size: 14px; color: var(--mt-text-body); margin: 10px 0 0; letter-spacing: .04em; text-transform: uppercase; }
.mt-numbers__value.is-emphasized { animation: mt-numbers-emphasis .5s ease; }
@keyframes mt-numbers-emphasis { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.07); filter: brightness(1.25); } }

/* ---------- Homepage: Why ---------- */

.mt-why { max-width: none; }
.mt-why__grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--mt-border-hairline-1); }
.mt-why__item { background: var(--mt-navy-1000); padding: 32px 28px; display: flex; gap: 16px; align-items: flex-start; }
.mt-why__item p { font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--mt-text-white); margin: 0; }
.mt-check { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; display: inline-block; }
.mt-check--cyan { border: 1px solid var(--mt-cyan); }
.mt-check--amber { border: 1px solid var(--mt-amber); }
.mt-check::after { content: ''; position: absolute; left: 6px; top: 3px; width: 6px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(40deg); }
.mt-check--cyan::after { border-color: var(--mt-cyan); }
.mt-check--amber::after { border-color: var(--mt-amber); }

/* Owner-approved mobile responsive correction (2026-08-08): the hard-coded
   3-column grid clipped items 3 and 6 off the right edge of the viewport at
   mobile widths (confirmed: only 4 of 6 benefit items were reachable below
   ~700px, with no horizontal-scroll affordance to reach the rest). This
   collapses to 2 columns, then 1 column, at the same breakpoints already
   used by the sitewide "Benefits" checklist component (.mt-benefit above)
   so every item stays fully visible and readable at every supported width;
   the fixed-3-column desktop composition is unchanged. */
@media (max-width: 880px) {
	.mt-why__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
	.mt-why__grid { grid-template-columns: 1fr; }
	.mt-why__item { padding: 20px 14px; }
}

/* ---------- Homepage: Conseils d'experts ---------- */

.mt-insights__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); gap: 24px; }
.mt-insight-card { background: var(--mt-navy-800); border: 1px solid var(--mt-border-hairline-1); border-radius: 2px; overflow: hidden; transition: transform .25s ease; }
.mt-insight-card:hover { transform: translateY(-6px); }
.mt-insight-card__header { height: 150px; position: relative; background: var(--mt-navy-800); overflow: hidden; border-bottom: 1px solid var(--mt-border-hairline-08); }
.mt-insight-card__number { position: absolute; right: -10px; bottom: -30px; font-family: var(--mt-font-heading); font-weight: 800; font-size: 120px; opacity: .08; line-height: 1; }
.mt-insight-card__header--cyan .mt-insight-card__number { color: var(--mt-cyan); }
.mt-insight-card__header--amber .mt-insight-card__number { color: var(--mt-amber); }
.mt-insight-card__bar { position: absolute; left: 24px; top: 24px; width: 26px; height: 3px; }
.mt-insight-card__header--cyan .mt-insight-card__bar { background: var(--mt-cyan); }
.mt-insight-card__header--amber .mt-insight-card__bar { background: var(--mt-amber); }
.mt-insight-card__body { padding: 26px 24px; }
.mt-insight-card__category { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-amber); }
.mt-insight-card__body h3 { font-family: var(--mt-font-heading); font-size: 17px; font-weight: 700; margin: 12px 0 10px; color: var(--mt-text-white); line-height: 1.35; }
.mt-insight-card__body p { font-size: 14px; line-height: 1.6; color: var(--mt-text-muted); margin: 0; }

/* ---------- Final CTA (shared across all 7 pages) ---------- */

.mt-cta-final {
	position: relative;
	padding: 120px clamp(20px,4vw,64px);
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 0%, #0b263b 0%, #04111d 60%);
}
.mt-cta-final__route { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.mt-cta-final__route svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.mt-cta-final__inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.mt-cta-final__title { font-family: var(--mt-font-heading); font-weight: 800; font-size: clamp(1.9rem,1.6vw + 1.4rem,2.8rem) !important; margin: 0 0 18px !important; color: var(--mt-text-white) !important; }
.mt-cta-final__lead { font-size: 17px !important; line-height: 1.65 !important; color: var(--mt-text-body) !important; margin: 0 0 36px !important; }
.mt-cta-final__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

@media (max-width: 780px) {
	.mt-hero__content { grid-template-columns: minmax(0,1fr); }
}

/* ---------- Internal pages: hero ---------- */

.mt-inner-hero {
	position: relative;
	padding: 150px clamp(20px,4vw,64px) 90px;
	overflow: hidden;
	background: radial-gradient(ellipse at 25% 20%, #0b263b 0%, #071b2b 45%, #04111d 100%);
}
.mt-inner-hero__inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; }
.mt-breadcrumb { margin-bottom: 24px; font-size: 13px; color: var(--mt-text-muted); }
.mt-breadcrumb a { color: var(--mt-text-muted); }
.mt-breadcrumb span:last-child { color: var(--mt-text-body); }
.mt-inner-hero__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(320px,100%),1fr)); gap: 48px; align-items: center; }
.mt-inner-hero__text { max-width: 640px; }
.mt-inner-hero__title { font-family: var(--mt-font-heading); font-weight: 800; font-size: clamp(2.2rem, 2.6vw + 1.2rem, 3.8rem) !important; line-height: 1.1 !important; margin: 14px 0 0 !important; text-wrap: balance; color: var(--mt-text-white) !important; }
.mt-inner-hero__lead { font-size: 17px !important; line-height: 1.65 !important; color: var(--mt-text-body) !important; max-width: 52ch; margin: 20px 0 0 !important; }
.mt-inner-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px !important; }

.mt-service-visual { position: relative; height: 360px; background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; overflow: hidden; }
.mt-service-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Decorative SVG animations (union of all per-page animations; final/ambient states apply when reduced-motion) */
.mt-anim-tag-pulse { animation: mt-tag-pulse 3s ease-in-out infinite; }
.mt-anim-drift { animation: mt-drift 5s ease-in-out infinite; }
.mt-anim-move { animation: mt-move 5s ease-in-out infinite; }
.mt-anim-status { animation: mt-status 4s ease-in-out infinite; }
.mt-anim-gate-lift { animation: mt-gate-lift 4s ease-in-out infinite; }
.mt-anim-route-draw { animation: mt-route-draw 7s linear infinite; }
.mt-anim-drive-path { offset-path: path('M 50 300 C 120 300, 140 200, 210 180 S 320 100, 350 60'); animation: mt-drive 7s linear infinite; }
.mt-anim-flow { animation: mt-flow 4s linear infinite; }
.mt-anim-node-pulse { animation: mt-node-pulse 2.4s ease-in-out infinite; }
.mt-anim-converge { animation: mt-converge 3s ease-out forwards; }
.mt-anim-pulse-node { animation: mt-pulse-node 3s ease-in-out infinite; }
.mt-anim-dest-pulse { animation: mt-dest-pulse 7s ease-out infinite; opacity: 0; }

/* Contact hero "Échange direct" */
.mt-anim-contact-msg-in { animation: mt-contact-msg-in 7s ease-in-out infinite; opacity: 0; }
.mt-anim-contact-msg-out { animation: mt-contact-msg-out 7s ease-in-out infinite; opacity: 0; }
.mt-anim-contact-ripple { animation: mt-contact-ripple 7s ease-out infinite; opacity: 0; }
.mt-anim-contact-glow { animation: mt-contact-glow 7s ease-out infinite; }

/* Consulting hero: staggered checkmark-row entrance (2026-08-08) */
.mt-anim-check-in { opacity: 0; animation: mt-check-in .45s cubic-bezier(.22,.7,.32,1) forwards; }
.mt-anim-check-in--1 { animation-delay: .25s; }
.mt-anim-check-in--2 { animation-delay: .55s; }
.mt-anim-check-in--3 { animation-delay: .85s; }
.mt-anim-panel-emphasis { animation: mt-panel-emphasis 1.1s ease-out 1.3s 1 both; }

/* Dédouanement hero: dossier resolve-in + sequential control validation (2026-08-08) */
.mt-anim-resolve-in { opacity: 0; animation: mt-resolve-in .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.mt-anim-node-fill { opacity: 0; animation: mt-node-fill-in .35s ease-out forwards; }
.mt-anim-node-fill--1 { animation-delay: .55s; }
.mt-anim-node-fill--2 { animation-delay: .85s; }
.mt-anim-node-fill--3 { animation-delay: 1.15s; }
.mt-anim-node-fill--4 { animation-delay: 1.45s; }
.mt-anim-dossier-path { stroke-dasharray: 525; stroke-dashoffset: 525; animation: mt-dossier-draw 1.5s ease-out .4s forwards; }
.mt-anim-panel-emphasis--dedou { animation: mt-panel-emphasis 1.1s ease-out 1.8s 1 both; }

/* Hero-visual viewport gating (mobile-stacked hero visuals only) —
   2026-08-08 owner-approved. 747px is not a chosen value: it is the exact
   viewport width below which `.mt-inner-hero__grid`'s own existing
   `repeat(auto-fit,minmax(min(320px,100%),1fr))` (gap 48px, inside padding
   clamp(20px,4vw,64px)) already collapses from 2 columns to 1 — measured
   directly against the live grid (748px is already 2-column/side-by-side;
   747px and below is 1-column/stacked) — i.e. the real point this hero
   component's own CSS switches from side-by-side to stacked. Above that
   width this rule never applies, so desktop/tablet side-by-side heroes are
   completely untouched. `assets/js/main.js` adds `data-mt-hero-anim` +
   `.mt-hero-anim-pending` (present in the server-rendered HTML by default)
   and removes `.mt-hero-anim-pending` once the container is ~30% visible.
   animation-play-state:paused freezes each animation's own local clock at
   0 rather than hiding a running one, so releasing it always starts the
   real beginning, never a mid-timeline jump. */
@media (max-width: 747px) {
	.mt-hero-anim-pending [class*="mt-anim-"],
	.mt-hero-anim-pending .mt-evo__ripple,
	.mt-hero-anim-pending .mt-evo__bubble,
	.mt-hero-anim-pending .mt-evo__bubble-inner {
		animation-play-state: paused;
	}
}

/* ---------- Internal pages: prose / standalone headings ---------- */

.mt-prose { max-width: 760px; }
.mt-section__title--standalone { margin: 0 0 40px !important; }

/* ---------- À propos: hero-right visual (owner-approved correction, 2026-08-08) ----------
   Replaces the previous "boxes connected by lines" diagram concept with a
   circular/radial bubble composition: a stable central 1985 founding bubble,
   a soft ambient ripple aura, and 7 floating concept bubbles that resolve in
   sequentially and then drift organically. No connecting lines. Reuses the
   existing mt-resolve-in / mt-drift keyframes and the site's own color/
   radius tokens throughout — only new addition is the mt-ripple keyframe. */

.mt-evo { position: relative; min-height: 440px; background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 12px; overflow: hidden; padding: 28px clamp(16px,3vw,28px); display: flex; align-items: center; justify-content: center; }
.mt-evo__orbit { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--mt-navy-800b) 0%, var(--mt-navy-800) 62%, transparent 72%); }

.mt-evo__ripple { position: absolute; top: 50%; left: 50%; width: 44%; height: 44%; border-radius: 50%; border: 1px solid var(--mt-border-cyan-18); transform: translate(-50%,-50%) scale(.8); opacity: 0; animation: mt-ripple 6s ease-out infinite; z-index: 1; }
.mt-evo__ripple--1 { animation-delay: 0s; }
.mt-evo__ripple--2 { animation-delay: 2s; }
.mt-evo__ripple--3 { animation-delay: 4s; }

.mt-evo__anchor { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(116px,40%,148px); aspect-ratio: 1 / 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--mt-navy-800b); border: 1px solid var(--mt-border-amber-4); padding: 10px; z-index: 3; box-shadow: 0 0 36px rgba(243,169,59,.12); }
.mt-evo__anchor-year { display: block; font-family: var(--mt-font-heading); font-weight: 800; font-size: 22px; line-height: 1.25; color: var(--mt-amber); }

.mt-evo__bubble { position: absolute; top: var(--mt-evo-top); left: var(--mt-evo-left); width: clamp(82px,25%,102px); aspect-ratio: 1 / 1; transform: translate(-50%,-50%); z-index: 2; animation: mt-evo-float var(--mt-evo-drift-duration) ease-in-out var(--mt-evo-drift-delay) infinite; }
.mt-evo__bubble-inner { width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; background: var(--mt-navy-800b); border: 1px solid var(--mt-border-cyan-18); opacity: 0; animation: mt-resolve-in .5s cubic-bezier(.22,.7,.32,1) var(--mt-evo-in-delay) forwards; }
.mt-evo__bubble .mt-dot { margin: 0 auto; }
.mt-evo__bubble-label { margin-top: 6px; font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--mt-text-white); overflow-wrap: break-word; }

.mt-evo__bubble--1 { --mt-evo-top: 12%; --mt-evo-left: 50%; --mt-evo-in-delay: .55s; --mt-evo-drift-delay: 1.05s; --mt-evo-drift-duration: 6.5s; }
.mt-evo__bubble--2 { --mt-evo-top: 26%; --mt-evo-left: 80%; --mt-evo-in-delay: .85s; --mt-evo-drift-delay: 1.35s; --mt-evo-drift-duration: 7.2s; }
.mt-evo__bubble--3 { --mt-evo-top: 58%; --mt-evo-left: 87%; --mt-evo-in-delay: 1.15s; --mt-evo-drift-delay: 1.65s; --mt-evo-drift-duration: 7.8s; }
.mt-evo__bubble--4 { --mt-evo-top: 84%; --mt-evo-left: 66%; --mt-evo-in-delay: 1.45s; --mt-evo-drift-delay: 1.95s; --mt-evo-drift-duration: 6.8s; }
.mt-evo__bubble--5 { --mt-evo-top: 84%; --mt-evo-left: 33%; --mt-evo-in-delay: 1.75s; --mt-evo-drift-delay: 2.25s; --mt-evo-drift-duration: 7.4s; }
.mt-evo__bubble--6 { --mt-evo-top: 58%; --mt-evo-left: 13%; --mt-evo-in-delay: 2.05s; --mt-evo-drift-delay: 2.55s; --mt-evo-drift-duration: 7s; }
.mt-evo__bubble--7 { --mt-evo-top: 26%; --mt-evo-left: 20%; --mt-evo-in-delay: 2.35s; --mt-evo-drift-delay: 2.85s; --mt-evo-drift-duration: 7.6s; }

/* ---------- À propos: mission ---------- */

.mt-mission-wrap { padding-top: 0 !important; }
.mt-mission { background: var(--mt-navy-800); border-left: 2px solid var(--mt-amber); border-radius: 2px; padding: 44px clamp(28px,4vw,56px); }
.mt-mission__statement { font-family: var(--mt-font-heading) !important; font-weight: 700 !important; font-size: clamp(1.3rem,1vw + 1.1rem,1.8rem) !important; line-height: 1.5 !important; color: var(--mt-text-white) !important; margin: 16px 0 0 !important; max-width: 64ch; }

/* ---------- À propos: simple pillars / values / timeline ---------- */

.mt-pillars-simple { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 24px; }
.mt-pillar-simple { background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: 32px 26px; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
/* Hover language matches homepage "Notre expertise" .mt-pillar cards exactly (border/background lift + dot glow), per owner request. */
.mt-pillar-simple:hover { transform: translateY(-6px); border-color: var(--mt-border-cyan-4); background: #0d2c44; }
.mt-pillar-simple .mt-dot { margin-bottom: 16px; transition: transform .3s ease, box-shadow .3s ease; }
.mt-pillar-simple:hover .mt-dot--cyan { transform: scale(1.6); box-shadow: 0 0 12px var(--mt-cyan); }
.mt-pillar-simple:hover .mt-dot--amber { transform: scale(1.6); box-shadow: 0 0 12px var(--mt-amber); }
.mt-pillar-simple h3 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--mt-text-white); }
.mt-pillar-simple p { font-size: 14.5px; line-height: 1.6; color: var(--mt-text-body); margin: 0; }

.mt-values-head { max-width: 1440px; margin: 0 auto; }
.mt-values__grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr)); gap: 20px; }
.mt-value-card { background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: 28px 24px; transition: border-color .25s ease, box-shadow .25s ease; }
.mt-value-card:hover { border-color: var(--mt-border-cyan-45); box-shadow: 0 16px 32px rgba(4,17,29,.35); }
.mt-value-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mt-value-card h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 10px; color: var(--mt-text-white); }
.mt-value-card p { font-size: 14px; line-height: 1.6; color: var(--mt-text-body); margin: 0; }

/* Replaces the previous "Étape suivante" fake step-timeline (2026-08-07 owner-approved revision). */
.mt-journey { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr)); gap: 40px; align-items: start; margin-bottom: 32px; }
.mt-journey__lead p { font-size: 16px; line-height: 1.75; color: var(--mt-text-body); margin: 0 0 20px; }
.mt-journey__lead p:last-child { margin-bottom: 0; }
.mt-journey__highlight { background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: 32px 28px; }
.mt-journey__highlight-figure { display: block; font-family: var(--mt-font-heading); font-weight: 800; font-size: clamp(2rem,1.6vw + 1.2rem,2.6rem); color: var(--mt-amber); margin-bottom: 14px; }
.mt-journey__highlight p { font-size: 14.5px; line-height: 1.6; color: var(--mt-text-body); margin: 0; }
.mt-journey__closing { max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.75; color: var(--mt-text-body); text-align: center; }

/* ---------- Internal pages: simple card grids (scope/services/areas) ---------- */

.mt-simple-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 24px; }

/* Five-item variant (Transport Local "Nos prestations", Suivi & Assistance
   "Nos domaines de suivi"): owner-approved fix (2026-08-08) for the previous
   auto-fit grid stranding a lone 5th card on its own row. Flex-based so all
   5 sit in one balanced row once the container is wide enough, wrap to a
   centered 2-per-row (2+2+1) on tablet, and stack to 1 column on mobile. */
.mt-simple-cards--5 { display: flex; flex-wrap: wrap; justify-content: center; }
.mt-simple-cards--5 .mt-simple-card { flex: 0 1 100%; }
@media (min-width: 640px) {
	.mt-simple-cards--5 .mt-simple-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (min-width: 1100px) {
	.mt-simple-cards--5 .mt-simple-card { flex-basis: calc((100% - 24px * 4) / 5); padding: 28px 20px; }
	.mt-simple-cards--5 .mt-simple-card h3 { font-size: 15.5px; line-height: 1.35; }
}
.mt-simple-card { background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: 32px 26px; transition: transform .25s ease, border-color .25s ease; }
.mt-simple-card:hover { transform: translateY(-6px); border-color: var(--mt-border-cyan-45); }
.mt-simple-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--mt-text-white); }
.mt-simple-card p { font-size: 14.5px; line-height: 1.6; color: var(--mt-text-body); margin: 0; }

.mt-footnote { font-size: 12.5px; color: var(--mt-text-disabled); margin: 24px 0 0; max-width: 70ch; }

/* ---------- Dédouanement: grouped scope ---------- */

.mt-scope-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); gap: 24px; }
.mt-scope-group { background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: 30px 26px; }
.mt-scope-group h3 { font-family: var(--mt-font-heading); font-size: 16px; font-weight: 700; margin: 0 0 16px; color: var(--mt-cyan); }
.mt-scope-group p { font-size: 14px; line-height: 1.6; color: var(--mt-text-body); margin: 0 0 10px; padding-left: 16px; position: relative; }
.mt-scope-group p::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--mt-cyan); border-radius: 50%; }

/* ---------- Process (numbered steps: rail variant, list variant) ----------
   Owner-approved revision (2026-08-08): the rail variant (.mt-process--5/--6,
   used by Consulting/Transport Local/Suivi & Assistance) replaces the plain
   small-number grid with a premium horizontal process-rail on desktop —
   large numbered node, thin connector line, hover glow — collapsing to a
   vertical timeline on mobile. Dédouanement's distinct .mt-process--list
   variant (a different content shape: longer descriptive rows) is untouched. */

.mt-process { display: flex; gap: 20px; }
.mt-process--5, .mt-process--6 { flex-wrap: wrap; }
.mt-process--5 .mt-process__step, .mt-process--6 .mt-process__step { flex: 1 1 0; }

.mt-process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 10px;
}
.mt-process__step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 30px;
	left: 50%;
	width: 100%;
	height: 1px;
	background: var(--mt-border-hairline-12);
	z-index: 0;
}
.mt-process__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--mt-navy-900);
	border: 1.5px solid var(--mt-border-cyan-35);
	font-family: var(--mt-font-heading);
	font-weight: 800;
	font-size: 21px;
	color: var(--mt-cyan);
	transition: border-color .3s ease, box-shadow .3s ease;
}
.mt-process__step:hover .mt-process__num { border-color: var(--mt-cyan); box-shadow: 0 0 18px rgba(66,201,239,.4); }
.mt-process__step p { margin: 18px 0 0; max-width: 22ch; transition: color .25s ease, transform .25s ease; }
.mt-process__step:hover p { color: var(--mt-text-white); transform: translateY(-2px); }

@media (max-width: 780px) {
	.mt-process--5, .mt-process--6 { flex-direction: column; flex-wrap: nowrap; gap: 0; }
	.mt-process--5 .mt-process__step, .mt-process--6 .mt-process__step { flex: 1 1 auto; }
	.mt-process__step {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		padding: 0 0 28px;
	}
	.mt-process__step:last-child { padding-bottom: 0; }
	.mt-process__step:not(:last-child)::after {
		top: 62px;
		left: 30px;
		width: 1px;
		height: calc(100% - 62px);
	}
	.mt-process__num { flex-shrink: 0; width: 60px; height: 60px; font-size: 19px; }
	.mt-process__step p { margin: 0 0 0 20px; padding-top: 16px; max-width: none; }
}

.mt-process__step p, .mt-process__row p { font-size: 14.5px; line-height: 1.5; color: var(--mt-text-white); font-weight: 600; }
.mt-process--list { display: flex; flex-direction: column; gap: 0; }
.mt-process--list .mt-process__row { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--mt-border-hairline-1); align-items: center; }
.mt-process--list .mt-process__num { min-width: 28px; font-size: 14px; }
.mt-process--list .mt-process__row p { margin: 0; font-size: 15px; }

/* ---------- Benefits (checklist) ----------
   2026-08-08 owner-approved revision: the previous auto-fit grid put 4 items
   on row 1 and stranded the 5th alone on row 2 (Consulting, Dédouanement,
   Transport Local, Suivi & Assistance all share this exact component).
   Flexbox with wrap + justify-content:center genuinely centers whatever
   items fall on an incomplete last row — no empty placeholder cell, no
   markup change needed since all four pages already share this markup.
   The hairline divider lives on each .mt-benefit card (border) rather
   than as a shared background painted behind the row gaps, so the empty
   margin beside a centered short row is never itself tinted/visible. */

.mt-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.mt-benefit { box-sizing: border-box; flex: 0 1 calc((100% - 4px) / 3); background: var(--mt-navy-1000); border: 1px solid var(--mt-border-hairline-1); padding: 28px 24px; display: flex; gap: 16px; align-items: flex-start; }
.mt-benefit p { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--mt-text-white); margin: 0; }
.mt-benefit .mt-check { width: 20px; height: 20px; }
.mt-benefit .mt-check::after { left: 5px; top: 2px; width: 5px; height: 9px; }

@media (max-width: 880px) {
	.mt-benefit { flex-basis: calc((100% - 2px) / 2); }
}
@media (max-width: 560px) {
	.mt-benefit { flex-basis: 100%; }
}

/* ---------- Related services ---------- */

.mt-related { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); gap: 24px; }
.mt-related__card { background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: 26px 22px; display: block; transition: transform .25s ease, border-color .25s ease; }
.mt-related__card:hover { transform: translateY(-4px); border-color: var(--mt-border-cyan-4); }
.mt-related__card span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-cyan); }
.mt-related__card p { font-size: 14px; color: var(--mt-text-body); margin: 10px 0 0; }

/* ---------- Contact page ---------- */

.mt-contact-section { padding-top: 110px; }
.mt-contact-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); gap: 56px; align-items: start; }
.mt-contact-info__field { margin-bottom: 22px; }
.mt-contact-info__field p { font-size: 15px; color: var(--mt-text-body); margin: 8px 0 0; line-height: 1.6; }
.mt-contact-reassurance { font-size: 14px; line-height: 1.6; color: var(--mt-text-muted); max-width: 70ch; margin: 56px auto 0; text-align: center; }

.mt-contact-form-card { background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: clamp(28px,4vw,44px); }
.mt-contact-form .mt-form-row { margin-bottom: 20px; }
.mt-contact-form .mt-form-row--split { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr)); gap: 20px; }
.mt-form-label { display: block; font-size: 13px; font-weight: 600; color: var(--mt-text-body); margin-bottom: 8px; }
.mt-form-control {
	width: 100%;
	background: var(--mt-navy-1000);
	border: 1px solid var(--mt-border-input-default);
	color: var(--mt-text-white);
	padding: 12px 14px;
	border-radius: 2px;
	font-size: 14px;
}
.mt-form-control.has-error { border-color: var(--mt-amber); }
textarea.mt-form-control { resize: vertical; }
.mt-form-error { display: block; font-size: 12.5px; color: var(--mt-amber); margin-top: 6px; }
.mt-contact-form__submit { width: 100%; border: none; }

.mt-form-success { text-align: center; padding: 40px 20px; }
.mt-form-success__icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(66,201,239,.12); border: 2px solid var(--mt-cyan); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; color: var(--mt-cyan); font-size: 22px; }
.mt-form-success h3 { font-family: var(--mt-font-heading); font-weight: 700; font-size: 19px; color: var(--mt-text-white); margin: 0 0 10px; }
.mt-form-success p { font-size: 14.5px; color: var(--mt-text-body); margin: 0; }

/* ---------- Blog: archive + single (added 2026-08-07, owner-approved Blog activation) ---------- */

.mt-posts { padding-top: 90px; }
.mt-posts__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); gap: 24px; }
.mt-post-card { display: block; background: var(--mt-navy-800); border: 1px solid var(--mt-border-hairline-1); border-radius: 2px; padding: 28px 26px; transition: transform .25s ease, border-color .25s ease; }
.mt-post-card:hover { transform: translateY(-6px); border-color: var(--mt-border-cyan-45); }
.mt-post-card__date { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-amber); }
.mt-post-card h3 { font-family: var(--mt-font-heading); font-size: 17px; font-weight: 700; margin: 12px 0 10px; color: var(--mt-text-white); line-height: 1.35; }
.mt-post-card p { font-size: 14px; line-height: 1.6; color: var(--mt-text-muted); margin: 0 0 18px; }
.mt-post-card__link { font-size: 14px; font-weight: 600; color: var(--mt-cyan); }

.mt-posts__empty { max-width: 560px; margin: 0 auto; text-align: center; background: var(--mt-navy-800); border: 1px solid var(--mt-border-cyan-14); border-radius: 2px; padding: 48px 36px; }
.mt-posts__empty h3 { font-family: var(--mt-font-heading); font-size: 19px; font-weight: 700; margin: 0 0 14px; color: var(--mt-text-white); }
.mt-posts__empty p { font-size: 15px; line-height: 1.65; color: var(--mt-text-body); margin: 0 0 24px; }

.pagination { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--mt-border-button-40); border-radius: 2px; color: var(--mt-text-white); font-size: 14px; font-weight: 600; transition: border-color .2s ease, color .2s ease; }
.pagination .page-numbers.current { background: var(--mt-amber); color: var(--mt-navy-1000); border-color: var(--mt-amber); }
.pagination .page-numbers:hover { border-color: var(--mt-cyan); color: var(--mt-cyan); }

.mt-post-thumbnail img { width: 100%; height: auto; border-radius: 2px; margin: 0 0 32px; display: block; }