@charset "UTF-8";
/* =========================================================================
   ULTRA FAST — feuille de style principale
   Bootstrap 5.3 sert de base (reset, grille, utilitaires) ; tout le design
   system de la marque est défini ici.
   ========================================================================= */

/* ------------------------------------------------------------------ FONTS */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- TOKENS */
:root {
	/* Vert de marque relevé sur l'aile du logo Ultra Fast */
	--ul-brand:      #17a055;
	--ul-brand-600:  #128a49;
	--ul-brand-700:  #067a3e;
	--ul-brand-soft: #e8f6ee;
	--ul-brand-rgb:  23, 160, 85;
	--ul-brand-grad: linear-gradient(135deg, #17a055 0%, #067a3e 100%);
	/* Vert lime des traits de vitesse — accent secondaire */
	--ul-lime:       #7dc242;
	--ul-navy:       #041937;

	--ul-ink:        #0b1e38;
	--ul-text:       #57657a;
	--ul-muted:      #8794a6;

	--ul-bg:         #ffffff;
	--ul-bg-soft:    #f3f6f4;
	--ul-surface:    #ffffff;
	--ul-panel:      #f5f8f6;
	--ul-line:       #e4e9e7;
	--ul-line-2:     #eef2f0;

	--ul-dark:       #0b1c33;
	--ul-dark-2:     #12263f;
	--ul-dark-line:  #1d3350;
	--ul-footer:     #071628;

	--ul-shadow-sm:  0 2px 8px rgba(4, 25, 55, .05);
	--ul-shadow:     0 10px 30px rgba(4, 25, 55, .08);
	--ul-shadow-lg:  0 24px 60px rgba(4, 25, 55, .13);

	--ul-r-sm: 10px;
	--ul-r:    14px;
	--ul-r-lg: 18px;

	--ul-head-h: 82px;
	--ul-ease:   cubic-bezier(.4, 0, .2, 1);
}

[data-ul-theme="dark"] {
	--ul-ink:      #eef2f7;
	--ul-text:     #9aa5b4;
	--ul-muted:    #778393;

	--ul-bg:       #060f1c;
	--ul-bg-soft:  #091423;
	--ul-surface:  #0d1a2c;
	--ul-panel:    #0b1728;
	--ul-line:     #1a2a3f;
	--ul-line-2:   #16253a;

	--ul-dark:     #0e1e33;
	--ul-dark-2:   #15273e;
	--ul-dark-line:#22354e;
	--ul-footer:   #040d19;

	--ul-brand-soft: #0d2a1c;
	--ul-shadow-sm:0 2px 8px rgba(0, 0, 0, .3);
	--ul-shadow:   0 10px 30px rgba(0, 0, 0, .38);
	--ul-shadow-lg:0 24px 60px rgba(0, 0, 0, .5);
	color-scheme: dark;
}

/* ------------------------------------------------------------------- BASE */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ul-text);
	background: var(--ul-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	transition: background-color .25s var(--ul-ease), color .25s var(--ul-ease);
}

h1, h2, h3, h4, h5, h6 { color: var(--ul-ink); font-weight: 700; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color .18s var(--ul-ease); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

::selection { background: var(--ul-brand); color: #fff; }

:focus-visible {
	outline: 2px solid var(--ul-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

.tx-brand { color: var(--ul-brand); }

.ul-skip {
	position: absolute; left: 12px; top: -60px; z-index: 2000;
	background: var(--ul-brand); color: #fff; padding: 10px 18px;
	border-radius: var(--ul-r-sm); font-weight: 600;
	transition: top .2s var(--ul-ease);
}
.ul-skip:focus { top: 12px; color: #fff; }

/* -------------------------------------------------------------- CONTAINER */
.ul-container {
	width: 100%;
	max-width: 1368px;
	margin-inline: auto;
	padding-inline: 24px;
}
.ul-container--wide { max-width: 1520px; padding-inline: 44px; }

/* ---------------------------------------------------------------- BOUTONS */
.ul-btn {
	--h: 46px;
	display: inline-flex; align-items: center; gap: 10px;
	height: var(--h); padding: 0 21px;
	border: 1px solid transparent; border-radius: var(--ul-r-sm);
	font-size: 14.5px; font-weight: 600; line-height: 1;
	white-space: nowrap; cursor: pointer;
	transition: background-color .2s var(--ul-ease), border-color .2s var(--ul-ease),
	            color .2s var(--ul-ease), box-shadow .25s var(--ul-ease), transform .2s var(--ul-ease);
}
.ul-btn i { font-size: 1.05em; line-height: 1; }
.ul-btn__arrow { transition: transform .25s var(--ul-ease); }
.ul-btn:hover .ul-btn__arrow { transform: translateX(4px); }

/* Dégradé repris de l'aile du logo (vert vif → vert profond). */
.ul-btn--brand {
	background: var(--ul-brand-grad); color: #fff;
	box-shadow: 0 6px 18px rgba(var(--ul-brand-rgb), .28);
}
.ul-btn--brand:hover {
	background: linear-gradient(135deg, #1cb05e 0%, #0a8a47 100%); color: #fff;
	box-shadow: 0 10px 24px rgba(var(--ul-brand-rgb), .36); transform: translateY(-1px);
}
.ul-btn--brand:active { background: linear-gradient(135deg, #128a49 0%, #05602f 100%); transform: translateY(0); }

.ul-btn--ghost {
	background: var(--ul-surface); color: var(--ul-ink);
	border-color: var(--ul-line); box-shadow: var(--ul-shadow-sm);
}
.ul-btn--ghost:hover { border-color: var(--ul-brand); color: var(--ul-brand); transform: translateY(-1px); }

.ul-btn--dark { background: var(--ul-dark); color: #fff; }
.ul-btn--dark:hover { background: var(--ul-dark-2); color: #fff; }

.ul-btn--sm { --h: 40px; padding: 0 17px; font-size: 14px; }
.ul-btn--xs { --h: 34px; padding: 0 15px; font-size: 13px; border-radius: 9px; }
.ul-btn--block { width: 100%; justify-content: center; }

/* Lien fléché « Découvrir » */
.ul-link {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #fff;
}
.ul-link i { transition: transform .25s var(--ul-ease); }
.ul-link:hover { color: #fff; }
.ul-link:hover i { transform: translateX(4px); }

/* =========================================================================
   EN-TÊTE
   ========================================================================= */
.ul-header {
	position: sticky; top: 0; z-index: 1030;
	background: var(--ul-bg);
	border-bottom: 1px solid transparent;
	transition: box-shadow .25s var(--ul-ease), border-color .25s var(--ul-ease), background-color .25s var(--ul-ease);
}
.ul-header.is-stuck { box-shadow: 0 4px 24px rgba(4, 25, 55, .08); border-bottom-color: var(--ul-line-2); }

.ul-header__bar {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	height: var(--ul-head-h);
}

/* ------ Logo ------ */
/* Verrou horizontal repris du logo : ULTRA (navy, droit) + FAST (vert, italique). */
.ul-logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ul-logo__mark { width: auto; height: 38px; }
.ul-logo__text { display: flex; align-items: baseline; gap: 7px; line-height: 1; }
.ul-logo__name {
	font-size: 23px; font-weight: 800; letter-spacing: .2px;
	color: var(--ul-ink);
}
.ul-logo__sub {
	font-size: 23px; font-weight: 800; font-style: italic; letter-spacing: .2px;
	color: var(--ul-brand);
}
.ul-logo--light .ul-logo__name { color: #fff; }

/* ------ Navigation ------ */
/* Centrée sur la page (et non dans l'espace restant) comme sur la maquette. */
.ul-nav {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	display: flex; justify-content: center;
}
.ul-nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; white-space: nowrap; }
.ul-nav__item { position: relative; }

.ul-nav__link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 14px;
	font-size: 14.5px; font-weight: 500; color: var(--ul-ink);
	border-radius: 8px; position: relative;
}
.ul-nav__link:hover { color: var(--ul-brand); }
.ul-nav__caret { font-size: 11px; transition: transform .25s var(--ul-ease); }
.has-drop:hover > .ul-nav__link .ul-nav__caret,
.has-drop.is-open > .ul-nav__link .ul-nav__caret,
.has-drop.is-open > .ul-lang__btn .ul-nav__caret { transform: rotate(180deg); }

.ul-nav__link.is-active { color: var(--ul-brand); font-weight: 600; }
.ul-nav__link.is-active::after {
	content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
	height: 2px; background: var(--ul-brand); border-radius: 2px;
}

/* ------ Menus déroulants ------ */
.ul-drop {
	position: absolute; top: calc(100% + 12px); left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 258px; padding: 8px;
	background: var(--ul-surface);
	border: 1px solid var(--ul-line);
	border-radius: var(--ul-r);
	box-shadow: var(--ul-shadow-lg);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .2s var(--ul-ease), transform .2s var(--ul-ease), visibility .2s;
	z-index: 20;
}
.ul-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-drop:hover > .ul-drop,
.has-drop.is-open > .ul-drop {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.ul-drop--sm { min-width: 168px; left: auto; right: 0; transform: translateX(0) translateY(8px); }
.has-drop:hover > .ul-drop--sm,
.has-drop.is-open > .ul-drop--sm { transform: translateX(0) translateY(0); }

.ul-drop__link {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 12px; border-radius: var(--ul-r-sm);
	font-size: 14.5px; font-weight: 500; color: var(--ul-ink);
	transition: background-color .18s var(--ul-ease), color .18s var(--ul-ease);
}
.ul-drop__link:hover { background: var(--ul-brand-soft); color: var(--ul-brand); }
.ul-drop__link.is-current { color: var(--ul-brand); font-weight: 600; }
.ul-drop__icon {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 32px; height: 32px; border-radius: 9px;
	background: var(--ul-brand-soft); color: var(--ul-brand); font-size: 15px;
}

/* ------ Actions ------ */
.ul-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.ul-icon-btn {
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--ul-panel); border: 1px solid var(--ul-line);
	color: var(--ul-ink); font-size: 17px; cursor: pointer;
	transition: background-color .2s var(--ul-ease), color .2s var(--ul-ease), border-color .2s var(--ul-ease);
}
.ul-icon-btn:hover { background: var(--ul-brand-soft); color: var(--ul-brand); border-color: transparent; }
.ul-icon-btn__sun { display: none; }
[data-ul-theme="dark"] .ul-icon-btn__moon { display: none; }
[data-ul-theme="dark"] .ul-icon-btn__sun { display: block; }

.ul-lang { position: relative; }
.ul-lang__btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 42px; padding: 0 15px;
	background: var(--ul-surface); border: 1px solid var(--ul-line);
	border-radius: var(--ul-r-sm);
	font-size: 14.5px; font-weight: 600; color: var(--ul-ink); cursor: pointer;
	transition: border-color .2s var(--ul-ease), color .2s var(--ul-ease);
}
.ul-lang__btn:hover { border-color: var(--ul-brand); color: var(--ul-brand); }

.ul-burger {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; padding: 0 10px;
	background: var(--ul-panel); border: 1px solid var(--ul-line);
	border-radius: var(--ul-r-sm); cursor: pointer;
}
.ul-burger span { display: block; height: 2px; background: var(--ul-ink); border-radius: 2px; transition: transform .25s var(--ul-ease), opacity .2s var(--ul-ease); }
.ul-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ul-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ul-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------ Menu mobile ------ */
.ul-mobile { position: fixed; inset: 0; z-index: 1200; }
.ul-mobile::before {
	content: ''; position: absolute; inset: 0;
	background: rgba(12, 25, 42, .5); backdrop-filter: blur(2px);
	opacity: 0; transition: opacity .28s var(--ul-ease);
}
.ul-mobile.is-open::before { opacity: 1; }
.ul-mobile__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(360px, 88vw); display: flex; flex-direction: column;
	background: var(--ul-bg); box-shadow: var(--ul-shadow-lg);
	transform: translateX(100%); transition: transform .3s var(--ul-ease);
}
.ul-mobile.is-open .ul-mobile__panel { transform: translateX(0); }
.ul-mobile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--ul-line); }
.ul-mobile__close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ul-line); background: var(--ul-panel); border-radius: 10px; color: var(--ul-ink); cursor: pointer; }
.ul-mobile__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; }
.ul-mobile__nav > ul > li { position: relative; border-bottom: 1px solid var(--ul-line-2); }
.ul-mobile__nav > ul > li > a { display: block; padding: 14px 44px 14px 10px; font-size: 15.5px; font-weight: 600; color: var(--ul-ink); }
.ul-mobile__nav > ul > li > a.is-active { color: var(--ul-brand); }
.ul-mobile__toggle { position: absolute; top: 6px; right: 4px; width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 0; color: var(--ul-muted); cursor: pointer; transition: transform .25s var(--ul-ease); }
.ul-mobile__toggle.is-open { transform: rotate(180deg); color: var(--ul-brand); }
.ul-mobile__sub { display: none; padding: 0 0 12px 10px; }
.ul-mobile__sub a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14.5px; color: var(--ul-text); }
.ul-mobile__sub a:hover { color: var(--ul-brand); }
.ul-mobile__sub i { color: var(--ul-brand); font-size: 15px; }
.ul-mobile__foot { padding: 18px 20px; border-top: 1px solid var(--ul-line); }
body.ul-locked { overflow: hidden; }

/* ------ Flash ------ */
.ul-flash { padding: 12px 0; font-size: 14.5px; font-weight: 500; }
.ul-flash .ul-container { display: flex; align-items: center; gap: 10px; }
.ul-flash.is-success { background: #ecfdf3; color: #05663a; }
.ul-flash.is-error   { background: var(--ul-brand-soft); color: var(--ul-brand-700); }
[data-ul-theme="dark"] .ul-flash.is-success { background: #08251a; color: #4ade80; }

/* =========================================================================
   HÉROS
   ========================================================================= */
.ul-hero {
	position: relative;
	background: var(--ul-bg-soft);
	padding: 30px 0 91px;
	/* pas d'overflow:hidden : la photo déborde sous le fond du héros,
	   comme sur la maquette (elle passe derrière la barre de suivi). */
}

.ul-hero__visual {
	position: absolute; top: 0; right: 0;
	width: 51.5%; max-width: 900px;
	aspect-ratio: 652 / 404;
	border-radius: 0 0 0 var(--ul-r-lg);
	overflow: hidden;
	z-index: 1;
}
.ul-hero__visual > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Carte flottante « Suivi en temps réel ».
   Elle recouvre exactement la carte présente dans la photo source. */
.ul-hero__card {
	position: absolute; left: 26.6%; right: 20.6%; bottom: 0;
	min-height: 31%;
	display: flex; align-items: center; gap: 12px;
	padding: 15px 16px 17px;
	background: var(--ul-dark);
	border-radius: var(--ul-r) var(--ul-r) 0 0;
	color: #fff;
}
.ul-hero__card-txt { flex: 1 1 auto; min-width: 0; }
.ul-hero__card-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; color: #fff; margin-bottom: 5px; }
.ul-hero__card-lead { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .74); margin-bottom: 11px; }
.ul-hero__route { position: relative; flex: 0 0 auto; width: 104px; }
.ul-hero__route svg { width: 100%; height: auto; display: block; }
.ul-hero__truck {
	position: absolute; left: 68.5%; top: 51%; transform: translate(-50%, -50%);
	width: 25px; height: 25px; display: grid; place-items: center;
	border-radius: 50%; background: #fff; color: var(--ul-dark); font-size: 12.5px;
}

.ul-hero__content { position: relative; z-index: 2; max-width: 620px; }

.ul-badge {
	display: inline-flex; align-items: center; gap: 9px;
	height: 33px; padding: 0 17px 0 14px;
	background: var(--ul-surface);
	border: 1px solid var(--ul-line);
	border-radius: 999px;
	box-shadow: var(--ul-shadow-sm);
	font-size: 11px; font-weight: 600; letter-spacing: .7px;
	text-transform: uppercase; color: var(--ul-ink);
	margin-bottom: 19px;
}
.ul-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ul-brand); flex: 0 0 auto; }

.ul-hero__title {
	font-size: 34px; font-weight: 800; line-height: 1.16;
	letter-spacing: -.4px; color: var(--ul-ink);
	margin-bottom: 20px;
}
.ul-hero__lead { font-size: 14px; line-height: 1.72; color: var(--ul-text); margin-bottom: 22px; }
.ul-hero__cta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 29px; }

.ul-hstats { display: flex; flex-wrap: wrap; gap: 38px; }
.ul-hstat { display: flex; align-items: center; gap: 12px; }
.ul-hstat__icon {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 37px; height: 37px; border-radius: 50%;
	background: var(--ul-brand-soft); color: var(--ul-brand); font-size: 16px;
}
.ul-hstat__txt { display: flex; flex-direction: column; line-height: 1.28; }
.ul-hstat__txt strong { font-size: 18px; font-weight: 700; color: var(--ul-ink); }
.ul-hstat__txt span { font-size: 12.5px; color: var(--ul-muted); }

/* =========================================================================
   BARRE DE SUIVI
   ========================================================================= */
.ul-track { position: relative; z-index: 5; margin-top: -48px; }
.ul-track__box {
	display: flex; align-items: center; gap: 32px;
	padding: 24px 28px;
	background: var(--ul-dark);
	border-radius: var(--ul-r-lg);
	box-shadow: 0 22px 50px rgba(12, 25, 42, .22);
}
.ul-track__icon {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 61px; height: 61px; border-radius: var(--ul-r);
	background: var(--ul-brand); color: #fff; font-size: 25px;
}
.ul-track__intro { flex: 0 0 auto; width: 348px; max-width: 100%; }
.ul-track__title { font-size: 17px; font-weight: 700; line-height: 1.4; color: #fff; margin-bottom: 3px; }
.ul-track__lead { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .66); }

.ul-track__form { flex: 1 1 auto; display: flex; align-items: center; gap: 24px; min-width: 0; }
.ul-track__btn { flex: 0 0 auto; min-width: 164px; justify-content: center; }

.ul-field { position: relative; flex: 1 1 auto; min-width: 0; }
.ul-field__icon {
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	color: var(--ul-muted); font-size: 17px; pointer-events: none;
}
.ul-field__input {
	width: 100%; height: 51px;
	padding: 0 18px 0 48px;
	background: #fff; border: 1px solid transparent; border-radius: var(--ul-r-sm);
	font-size: 14.5px; color: #101a2b;
	transition: box-shadow .2s var(--ul-ease), border-color .2s var(--ul-ease);
}
.ul-field__input::placeholder { color: #98a1ae; }
.ul-field__input:focus { outline: none; border-color: var(--ul-brand); box-shadow: 0 0 0 4px rgba(var(--ul-brand-rgb), .16); }

.ul-track__msg { font-size: 14px; }
.ul-track__msg:not(:empty) { margin-top: 14px; }
.ul-track__msg.is-error   { color: var(--ul-brand); }
.ul-track__msg.is-success { color: #0f9d58; }

/* =========================================================================
   POINTS FORTS
   ========================================================================= */
.ul-features { padding: 26px 0 0; }
.ul-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ul-feature {
	display: flex; align-items: flex-start; gap: 15px;
	padding: 6px 17px;
}
.ul-feature + .ul-feature { border-left: 1px solid var(--ul-line); }
.ul-features__grid > .ul-feature:first-child { padding-left: 0; }
.ul-features__grid > .ul-feature:last-child  { padding-right: 0; }

.ul-feature__icon {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 57px; height: 57px; border-radius: 15px;
	background: var(--ul-brand-soft); color: var(--ul-brand); font-size: 22px;
	transition: background-color .25s var(--ul-ease), color .25s var(--ul-ease), transform .25s var(--ul-ease);
}
.ul-feature:hover .ul-feature__icon { background: var(--ul-brand); color: #fff; transform: translateY(-3px); }
.ul-feature__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ul-ink); margin-bottom: 4px; }
.ul-feature__text { font-size: 13.2px; line-height: 1.6; color: var(--ul-muted); }

/* =========================================================================
   SECTIONS — en-têtes
   ========================================================================= */
.ul-sechead { text-align: center; margin-bottom: 10px; }
.ul-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: 1.7px;
	text-transform: uppercase; color: var(--ul-brand); margin-bottom: 6px;
}
.ul-h2 { font-size: 24.5px; font-weight: 700; line-height: 1.32; letter-spacing: -.3px; color: var(--ul-ink); }
/* Rappel des traits de vitesse du logo : lime → vert de marque. */
.ul-rule { display: block; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ul-lime) 0%, var(--ul-brand) 100%); margin: 9px auto 0; }
.ul-sechead--left { text-align: left; }
.ul-sechead--left .ul-rule { margin-inline: 0; }

/* =========================================================================
   SOLUTIONS
   ========================================================================= */
.ul-solutions { padding: 16px 0 0; }
.ul-solutions__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.ul-scard {
	position: relative; overflow: hidden;
	min-height: 182px; display: flex; flex-direction: column;
	background: var(--ul-dark);
	border-radius: 15px;
	transition: transform .3s var(--ul-ease), box-shadow .3s var(--ul-ease);
}
.ul-scard:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(12, 25, 42, .22); }

.ul-scard__media { position: absolute; inset: 0 0 auto; height: 74px; }
.ul-scard__media img { width: 100%; height: 100%; object-fit: cover; }
.ul-scard__media::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15, 22, 33, .22) 0%, rgba(15, 22, 33, .55) 48%, var(--ul-dark) 100%);
}

.ul-scard__icon {
	position: relative; z-index: 2;
	display: grid; place-items: center;
	width: 37px; height: 37px; margin: 27px 0 0 17px;
	border-radius: 50%; background: var(--ul-brand); color: #fff; font-size: 16px;
	box-shadow: 0 5px 14px rgba(var(--ul-brand-rgb), .38);
	transition: transform .3s var(--ul-ease);
}
.ul-scard:hover .ul-scard__icon { transform: scale(1.07); }

.ul-scard__body { position: relative; z-index: 2; padding: 20px 17px 13px; margin-top: auto; }
.ul-scard__title { font-size: 15.5px; font-weight: 700; line-height: 1.16; color: #fff; margin-bottom: 7px; }
.ul-scard__text { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .62); margin-bottom: 6px; }
.ul-scard__overlay { position: absolute; inset: 0; z-index: 3; }

/* =========================================================================
   CHIFFRES CLÉS
   ========================================================================= */
.ul-counters { padding: 22px 0 14px; }
.ul-counters__grid {
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: var(--ul-panel);
	border: 1px solid var(--ul-line-2);
	border-radius: var(--ul-r-lg);
	padding: 12px 8px;
}
.ul-counter { display: flex; align-items: center; gap: 14px; padding: 2px 22px; }
.ul-counter + .ul-counter { border-left: 1px solid var(--ul-line); }
.ul-counter__icon {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 41px; height: 41px; border-radius: 12px;
	background: var(--ul-surface); color: var(--ul-brand); font-size: 19px;
	box-shadow: var(--ul-shadow-sm);
}
.ul-counter__txt { display: flex; flex-direction: column; line-height: 1.25; }
.ul-counter__value { font-size: 23px; font-weight: 700; color: var(--ul-brand); }
.ul-counter__label { font-size: 13px; color: var(--ul-muted); }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.ul-footer { background: var(--ul-footer); color: rgba(255, 255, 255, .62); padding: 34px 0 0; }
.ul-footer__grid {
	display: grid;
	grid-template-columns: 1.25fr 1.02fr 1.08fr 1fr 1.32fr 1.36fr;
	gap: 24px;
	padding-bottom: 40px;
}
.ul-footer__about { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .55); margin-top: 14px; }
.ul-footer .ul-logo__sub { color: var(--ul-brand); }

.ul-social { display: flex; gap: 10px; margin-top: 20px; }
.ul-social a {
	display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255, 255, 255, .07); color: #fff; font-size: 14px;
	transition: background-color .2s var(--ul-ease), transform .2s var(--ul-ease);
}
.ul-social a:hover { background: var(--ul-brand); color: #fff; transform: translateY(-2px); }

.ul-footer__title {
	font-size: 12.5px; font-weight: 700; letter-spacing: 1.1px;
	text-transform: uppercase; color: #fff; margin-bottom: 15px;
}
.ul-footer__links li + li { margin-top: 7px; }
.ul-footer__links a { font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.ul-footer__links a:hover { color: var(--ul-brand); }

.ul-footer__contact li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.ul-footer__contact li + li { margin-top: 12px; }
.ul-footer__contact i { color: var(--ul-brand); font-size: 15px; line-height: 1.6; }
.ul-footer__contact a:hover { color: #fff; }

.ul-news { display: flex; gap: 8px; margin-top: 16px; }
.ul-news__input {
	flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ul-r-sm); color: #fff; font-size: 14px;
	transition: border-color .2s var(--ul-ease), background-color .2s var(--ul-ease);
}
.ul-news__input::placeholder { color: rgba(255, 255, 255, .4); }
.ul-news__input:focus { outline: none; border-color: var(--ul-brand); background: rgba(255, 255, 255, .1); }
.ul-news__btn {
	flex: 0 0 auto; width: 46px; height: 44px;
	display: grid; place-items: center;
	background: var(--ul-brand); border: 0; border-radius: var(--ul-r-sm);
	color: #fff; font-size: 16px; cursor: pointer;
	transition: background-color .2s var(--ul-ease);
}
.ul-news__btn:hover { background: var(--ul-brand-600); }
.ul-news__msg { margin-top: 9px; font-size: 13px; min-height: 1px; }
.ul-news__msg.is-error { color: #ff8a8d; }
.ul-news__msg.is-success { color: #4ade80; }

.ul-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
	padding: 20px 0 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 13.5px; color: rgba(255, 255, 255, .45);
}
.ul-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 22px; }
.ul-footer__bottom a:hover { color: #fff; }

/* ------ Retour en haut ------ */
.ul-totop {
	position: fixed; right: 22px; bottom: 22px; z-index: 900;
	width: 46px; height: 46px; display: grid; place-items: center;
	background: var(--ul-brand); color: #fff; border: 0; border-radius: 50%;
	box-shadow: 0 8px 22px rgba(var(--ul-brand-rgb), .35); cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(14px);
	transition: opacity .25s var(--ul-ease), transform .25s var(--ul-ease), visibility .25s, background-color .2s;
}
.ul-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ul-totop:hover { background: var(--ul-brand-600); }

/* =========================================================================
   PAGES INTERNES
   ========================================================================= */
.ul-page-hero {
	position: relative;
	background: var(--ul-bg-soft);
	padding: 52px 0 56px;
	overflow: hidden;
}
.ul-page-hero::after {
	content: ''; position: absolute; right: -80px; top: -110px;
	width: 340px; height: 340px; border-radius: 50%;
	background: radial-gradient(circle at center, rgba(var(--ul-brand-rgb), .1), transparent 68%);
	pointer-events: none;
}
.ul-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ul-muted); margin-bottom: 14px; }
.ul-crumb a:hover { color: var(--ul-brand); }
.ul-crumb i { font-size: 11px; }
.ul-crumb span[aria-current] { color: var(--ul-ink); font-weight: 600; }
.ul-page-hero__title { font-size: 34px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; margin-bottom: 14px; }
.ul-page-hero__lead { font-size: 15.5px; line-height: 1.75; max-width: 720px; }

.ul-section { padding: 56px 0; }
.ul-section--soft { background: var(--ul-bg-soft); }
.ul-section--tight { padding: 40px 0; }

.ul-card {
	background: var(--ul-surface);
	border: 1px solid var(--ul-line);
	border-radius: var(--ul-r);
	padding: 26px;
	box-shadow: var(--ul-shadow-sm);
	transition: transform .28s var(--ul-ease), box-shadow .28s var(--ul-ease), border-color .28s var(--ul-ease);
}
.ul-card:hover { transform: translateY(-4px); box-shadow: var(--ul-shadow); border-color: transparent; }
.ul-card__icon {
	display: grid; place-items: center;
	width: 54px; height: 54px; border-radius: 14px;
	background: var(--ul-brand-soft); color: var(--ul-brand); font-size: 22px;
	margin-bottom: 18px;
}
.ul-card__title { font-size: 17.5px; font-weight: 700; margin-bottom: 9px; }
.ul-card__text { font-size: 14.5px; line-height: 1.7; color: var(--ul-text); }

/* Média + texte */
.ul-media { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ul-media__img { border-radius: var(--ul-r-lg); overflow: hidden; box-shadow: var(--ul-shadow); }
.ul-media__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Formulaires génériques */
.ul-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ul-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ul-ink); margin-bottom: 7px; }
.ul-input, .ul-textarea, .ul-select {
	width: 100%; padding: 13px 15px;
	background: var(--ul-surface);
	border: 1px solid var(--ul-line); border-radius: var(--ul-r-sm);
	font-size: 14.5px; color: var(--ul-ink);
	transition: border-color .2s var(--ul-ease), box-shadow .2s var(--ul-ease);
}
.ul-input::placeholder, .ul-textarea::placeholder { color: var(--ul-muted); }
.ul-input:focus, .ul-textarea:focus, .ul-select:focus {
	outline: none; border-color: var(--ul-brand); box-shadow: 0 0 0 4px rgba(var(--ul-brand-rgb), .12);
}
.ul-textarea { resize: vertical; min-height: 148px; }
.ul-form-msg { margin-top: 14px; font-size: 14px; }
.ul-form-msg.is-error { color: var(--ul-brand); }
.ul-form-msg.is-success { color: #0f9d58; }

/* Liste d'informations (coordonnées, détails d'expédition) */
.ul-info-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--ul-text); }
.ul-info-list li + li { margin-top: 12px; }
.ul-info-list i { color: var(--ul-brand); font-size: 15px; line-height: 1.6; flex: 0 0 auto; }
.ul-info-list strong { color: var(--ul-ink); font-weight: 600; }
.ul-info-list a:hover { color: var(--ul-brand); }

/* Suivi — frise */
.ul-steps { position: relative; padding-left: 8px; }
.ul-step { position: relative; display: flex; gap: 20px; padding-bottom: 30px; }
.ul-step:last-child { padding-bottom: 0; }
.ul-step::before {
	content: ''; position: absolute; left: 21px; top: 44px; bottom: 0;
	width: 2px; background: var(--ul-line);
}
.ul-step:last-child::before { display: none; }
.ul-step__dot {
	position: relative; z-index: 2; flex: 0 0 auto;
	width: 44px; height: 44px; display: grid; place-items: center;
	border-radius: 50%; background: var(--ul-panel);
	border: 1px solid var(--ul-line); color: var(--ul-muted); font-size: 17px;
}
.ul-step.is-done .ul-step__dot { background: var(--ul-brand); border-color: var(--ul-brand); color: #fff; box-shadow: 0 5px 14px rgba(var(--ul-brand-rgb), .3); }
.ul-step.is-done::before { background: var(--ul-brand); opacity: .35; }
.ul-step__label { font-size: 16px; font-weight: 700; color: var(--ul-ink); }
.ul-step__meta { font-size: 14px; color: var(--ul-muted); }
.ul-step__time { font-size: 13.5px; color: var(--ul-brand); font-weight: 600; }

/* Blog */
.ul-post { overflow: hidden; padding: 0; }
.ul-post__media { aspect-ratio: 16 / 9; overflow: hidden; }
.ul-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ul-ease); }
.ul-post:hover .ul-post__media img { transform: scale(1.05); }
.ul-post__body { padding: 22px 24px 26px; }
.ul-post__meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ul-muted); margin-bottom: 10px; }
.ul-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ul-brand-soft); color: var(--ul-brand); font-size: 12px; font-weight: 600; }
.ul-post__title { font-size: 17.5px; font-weight: 700; line-height: 1.4; margin-bottom: 9px; }
.ul-post:hover .ul-post__title { color: var(--ul-brand); }

/* Appel à l'action */
.ul-cta {
	background: var(--ul-dark);
	border-radius: var(--ul-r-lg);
	padding: 42px 46px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
}
.ul-cta h2 { color: #fff; font-size: 25px; margin-bottom: 8px; }
.ul-cta p { color: rgba(255, 255, 255, .66); font-size: 14.5px; }

/* Erreur 404 */
.ul-404 { text-align: center; padding: 90px 0 100px; }
.ul-404__code { font-size: 110px; font-weight: 800; line-height: 1; color: var(--ul-brand); letter-spacing: -3px; }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ul-ease), transform .6s var(--ul-ease); transition-delay: var(--d, 0ms); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1399.98px) {
	.ul-hero__title { font-size: 34px; }
	.ul-nav__link { padding: 10px 11px; font-size: 14.5px; }
	.ul-hero__content { max-width: 560px; }
	.ul-hstats { gap: 28px; }
}

@media (max-width: 1199.98px) {
	:root { --ul-head-h: 74px; }
	.ul-nav { display: none; }
	.ul-burger { display: flex; }
	.ul-header__bar { justify-content: space-between; }

	.ul-hero { padding: 34px 0 96px; }
	.ul-hero__visual { width: 44%; }
	.ul-hero__title { font-size: 31px; }
	.ul-hero__content { max-width: 470px; }
	.ul-hero__card { padding: 14px 15px 16px; }
	.ul-hero__card-lead { font-size: 12.5px; margin-bottom: 10px; }
	.ul-hero__route { width: 92px; }

	.ul-track__box { flex-wrap: wrap; gap: 22px; }
	.ul-track__intro { width: auto; flex: 1 1 auto; }
	.ul-track__form { flex: 1 1 100%; }

	.ul-solutions__grid { grid-template-columns: repeat(3, 1fr); }
	.ul-counters__grid { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
	.ul-counter:nth-child(4) { border-left: 0; }

	.ul-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 38px; }
}

@media (max-width: 991.98px) {
	.ul-hero { padding: 30px 0 90px; }
	/* La photo passe dans le flux, au-dessus du texte. Le bas de l'image
	   (qui contient la barre de suivi de la maquette) est recadré. */
	.ul-hero__visual {
		position: relative; order: -1;
		width: 100%; max-width: none;
		aspect-ratio: 652 / 404;
		border-radius: var(--ul-r-lg); margin-bottom: 32px;
	}
	.ul-hero__content { max-width: none; }
	.ul-hero__route { display: none; }
	.ul-hero .ul-container { display: flex; flex-direction: column; }

	.ul-features__grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
	.ul-feature:nth-child(odd) { padding-left: 0; border-left: 0; }
	.ul-feature:nth-child(even) { padding-right: 0; }

	.ul-solutions__grid { grid-template-columns: repeat(2, 1fr); }
	.ul-h2 { font-size: 25px; }
	.ul-media { grid-template-columns: 1fr; gap: 28px; }
	.ul-cta { padding: 32px; }
	.ul-page-hero__title { font-size: 28px; }
}

@media (max-width: 991.98px) {
	.ul-container--wide { padding-inline: 24px; }
}

@media (max-width: 767.98px) {
	body { font-size: 14.5px; }
	.ul-container { padding-inline: 18px; }

	.ul-hero { padding: 24px 0 84px; }
	.ul-hero__title { font-size: 27px; letter-spacing: -.2px; }
	.ul-badge { font-size: 10.5px; letter-spacing: .5px; height: 30px; padding: 0 13px 0 11px; margin-bottom: 20px; }
	.ul-hero__cta { gap: 12px; }
	.ul-hero__cta .ul-btn { flex: 1 1 100%; justify-content: center; }
	.ul-hstats { gap: 18px 24px; }
	.ul-hero__card { padding: 12px 13px 14px; }
	.ul-hero__card-title { font-size: 14.5px; }
	.ul-hero__card-lead { font-size: 12px; margin-bottom: 9px; }
	.ul-container--wide { padding-inline: 18px; }
	.ul-lang { display: none; }

	.ul-track { margin-top: -56px; }
	.ul-track__box { padding: 20px; gap: 16px; }
	.ul-track__intro { width: auto; flex: 1 1 auto; }
	.ul-track__form { flex-wrap: wrap; gap: 12px; }
	.ul-track__btn { width: 100%; }

	.ul-features__grid { grid-template-columns: 1fr; }
	.ul-feature { padding: 0; border-left: 0 !important; }
	.ul-solutions__grid { grid-template-columns: 1fr; }
	.ul-counters__grid { grid-template-columns: 1fr; padding: 12px 16px; }
	.ul-counter { padding: 14px 0; border-left: 0 !important; }
	.ul-counter + .ul-counter { border-top: 1px solid var(--ul-line); }

	.ul-footer__grid { grid-template-columns: 1fr 1fr; }
	.ul-footer__brand { grid-column: 1 / -1; }
	.ul-form-grid { grid-template-columns: 1fr; }
	.ul-cta { padding: 26px 22px; }
	.ul-404__code { font-size: 76px; }
}

@media (max-width: 575.98px) {
	.ul-header__cta span { display: none; }
	.ul-header__cta { padding: 0 14px; }
}

@media (max-width: 479.98px) {
	.ul-logo__name { font-size: 19px; }
	.ul-logo__sub { font-size: 19px; }
	.ul-logo__mark { height: 31px; }
	.ul-logo__text { gap: 6px; }
	.ul-hero__title { font-size: 24px; }
	.ul-footer__grid { grid-template-columns: 1fr; }
	.ul-header__actions { gap: 8px; }
}

/* Impression */
@media print {
	.ul-header, .ul-footer, .ul-totop, .ul-mobile, .ul-track { display: none !important; }
	body { color: #000; background: #fff; }
}