/* ═══════════════════════════════════════════════════════════
   OPALO'LOGISTIQUE — Design System
   Blue & white, data-driven. Inter + JetBrains Mono.
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy-950: #06080F;
  --navy-900: #0A1224;
  --navy-800: #111D3D;
  --ink: #0B1633;
  --ink-muted: #4B5877;
  --blue-800: #1E40AF;   /* logo blue */
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-400: #60A5FA;
  --blue-300: #93C5FD;
  --blue-100: #DBEAFE;
  --ice: #F5F8FF;
  --white: #FFFFFF;
  --green: #2ECC71;
  --border: rgba(11, 22, 51, 0.09);
  --border-dark: rgba(255, 255, 255, 0.10);

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 250ms;
  --dur-2: 450ms;
  --dur-3: 700ms;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sh-md: 0 6px 24px -8px rgba(11, 22, 51, 0.14);
  --sh-lg: 0 24px 64px -24px rgba(11, 22, 51, 0.28);
  --sh-glow: 0 0 48px -8px rgba(37, 99, 235, 0.45);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
strong { font-weight: 600; }
.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.container { width: min(1160px, 100% - 48px); margin-inline: auto; }
.section { padding-block: clamp(88px, 10vw, 136px); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::selection { background: var(--blue-600); color: #fff; }

/* ── typography ── */
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 19px; letter-spacing: -0.015em; }

.section-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(48px, 6vw, 72px); }
.section-head-left { text-align: left; margin-inline: 0; }
.section-eyebrow { font-size: 12px; font-weight: 600; color: var(--blue-600); letter-spacing: 0.18em; margin-bottom: 16px; }
.section-sub { color: var(--ink-muted); font-size: 17px; margin-top: 18px; }
.section-head-dark h2 { color: #fff; }
.section-head-dark .section-sub { color: rgba(255, 255, 255, 0.65); }

/* ── buttons & links ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 13px 26px; border-radius: var(--r-pill);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  will-change: transform;
}
.btn svg { transition: transform var(--dur-1) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  color: #fff; box-shadow: 0 10px 28px -10px rgba(37, 99, 235, 0.65);
}
.btn-primary:hover { box-shadow: var(--sh-glow); transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--blue-800); box-shadow: 0 10px 32px -12px rgba(0,0,0,.35); }
.btn-white:hover { transform: translateY(-2px); }
.btn-ghost {
  color: #fff; border: 1px solid var(--border-dark);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255,255,255,.25); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue-500); outline-offset: 3px;
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--blue-600);
}
.link-arrow svg { transition: transform var(--dur-1) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ── pulse / ping ── */
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  display: inline-block; flex: none;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
.ping { animation: ping 2.2s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
.ping-late { animation-delay: 1.1s; }
@keyframes ping { 0% { transform: scale(0.6); opacity: .5; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

/* ═══ NAV ═══ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav-inner {
  width: min(1240px, 100% - 40px); margin-inline: auto;
  display: flex; align-items: center; gap: 32px; height: 72px;
}
.nav-brand { display: flex; align-items: center; gap: 11px; }
.nav-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.6); }
.nav-logo img { width: 24px; height: 24px; }
.logo-light { display: none; }
.nav-name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: #fff;
  transition: color var(--dur-2) var(--ease); }
.nav-name-accent { color: var(--blue-400); transition: color var(--dur-2) var(--ease); }
.nav-links { display: flex; gap: 4px; margin-inline: auto; }
.nav-links a {
  padding: 8px 14px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-login { font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.75);
  transition: color var(--dur-1) var(--ease); }
.nav-login:hover { color: #fff; }

.nav.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-color: var(--border);
  box-shadow: 0 4px 24px -12px rgba(11, 22, 51, 0.12);
}
.nav.scrolled .nav-name { color: var(--ink); }
.nav.scrolled .nav-name-accent { color: var(--blue-600); }
.nav.scrolled .nav-links a { color: var(--ink-muted); }
.nav.scrolled .nav-links a:hover { color: var(--ink); background: rgba(11, 22, 51, 0.05); }
.nav.scrolled .nav-login { color: var(--ink-muted); }
.nav.scrolled .nav-login:hover { color: var(--ink); }
.nav.scrolled .logo-dark { display: none; }
.nav.scrolled .logo-light { display: block; }
.nav.scrolled .nav-logo { background: #fff; border: 1px solid var(--border); box-shadow: var(--sh-md); }

.nav-burger { display: none; width: 44px; height: 44px; position: relative; z-index: 102; }
.nav-burger span {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav.scrolled .nav-burger span, .nav.menu-open .nav-burger span { background: var(--ink); }
.nav-burger span:nth-child(1) { top: 18px; }
.nav-burger span:nth-child(2) { top: 25px; }
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column; gap: 6px;
  padding: 12px 24px 28px;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:not(.btn) { padding: 13px 8px; font-weight: 600; font-size: 17px; color: var(--ink);
  border-bottom: 1px solid var(--border); }
.mobile-menu .btn { margin-top: 14px; }
.nav.menu-open .mobile-menu { display: flex; }
.nav.menu-open { background: rgba(255, 255, 255, 0.96); }
.nav.menu-open .nav-name { color: var(--ink); }
.nav.menu-open .nav-name-accent { color: var(--blue-600); }
.nav.menu-open .logo-dark { display: none; }
.nav.menu-open .logo-light { display: block; }
.nav.menu-open .nav-logo { background: #fff; border: 1px solid var(--border); }

/* ═══ HERO ═══ */
.hero {
  position: relative; min-height: 100svh;
  background: radial-gradient(120% 90% at 70% -10%, #12245c 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 0 80px;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }

/* Photo de bannière (Chine → Algérie).
   Largeur entière et proportions d'origine conservées : les deux drapeaux sont
   aux extrémités de l'image, un recadrage « cover » les ferait sortir du cadre.
   L'image est donc ancrée en haut et se fond vers le bas dans le fond de page. */
.hero-photo {
  position: absolute; top: 0; left: 0; right: 0; display: block;
  aspect-ratio: 1920 / 769; min-height: 62%;
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* Voiles superposés, volontairement légers : les drapeaux occupent les deux
   coins hauts, un voile dense les éteindrait. La lisibilité du titre est
   assurée par une ombre portée sur le texte plutôt que par un fond sombre.
   Seule la bande du menu reste assombrie (liens blancs sur drapeau blanc). */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 8, 20, 0.18) 0%, rgba(4, 8, 20, 0.12) 45%, rgba(4, 8, 20, 0.16) 100%),
    linear-gradient(180deg, rgba(6, 8, 15, 0.62) 0%, rgba(6, 8, 15, 0.26) 9%, rgba(6, 8, 15, 0.05) 32%,
      rgba(6, 8, 15, 0.55) 72%, var(--navy-950) 100%);
}
/* Sur mobile la photo redevient plein cadre (une bande large serait minuscule),
   avec un voile plus dense car le recadrage tombe sur l'avion, très clair. */
@media (max-width: 720px) {
  .hero-photo {
    bottom: 0; aspect-ratio: auto; min-height: 0;
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(4, 8, 20, 0.66) 0%, rgba(4, 8, 20, 0.50) 40%,
      rgba(4, 8, 20, 0.68) 76%, var(--navy-950) 100%);
  }
}

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
}
/* Halos volontairement discrets : la photo porte déjà l'ambiance */
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.hero-glow-1 { width: 560px; height: 560px; top: -180px; right: -80px;
  background: rgba(37, 99, 235, 0.16); animation: drift 14s ease-in-out infinite alternate; }
.hero-glow-2 { width: 420px; height: 420px; bottom: -160px; left: -120px;
  background: rgba(30, 64, 175, 0.20); animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 36px); } }

/* Étoiles masquées : invisibles et bruitées par-dessus la photo */
.hero-stars { display: none; }
.hero-stars span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }

.hero-inner {
  position: relative; width: min(1160px, 100% - 48px); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--blue-300);
  border: 1px solid rgba(96, 165, 250, 0.25);
  background: rgba(37, 99, 235, 0.10);
  padding: 8px 16px; border-radius: var(--r-pill);
  margin-bottom: 28px;
}
.hero-title {
  font-size: clamp(38px, 5.2vw, 60px); margin-bottom: 24px;
  /* Ombre portée : lisibilité sur la photo sans avoir à l'assombrir */
  text-shadow: 0 2px 22px rgba(2, 5, 12, 0.85), 0 1px 4px rgba(2, 5, 12, 0.7);
}
.hero-title-accent { color: var(--blue-400); }
.hero-sub {
  font-size: 17.5px; color: rgba(255, 255, 255, 0.86); max-width: 460px; margin-bottom: 36px;
  text-shadow: 0 1px 14px rgba(2, 5, 12, 0.9), 0 1px 3px rgba(2, 5, 12, 0.75);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* hero tracking card (composant démo) */
.hero-card {
  /* Fond assombri (et non translucide clair) pour rester lisible sur la photo */
  background: rgba(7, 12, 26, 0.74);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-card-head {
  display: flex; align-items: center; gap: 7px;
  padding: 15px 20px; border-bottom: 1px solid var(--border-dark);
}
.hc-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.hc-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.6); margin-left: 10px; }
.hc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--green); }
.hero-route { position: relative; padding: 18px 14px 0; }
.hero-route-svg { width: 100%; height: auto; }
.hero-route-cities {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 18px; gap: 8px;
}
.hr-city { display: flex; align-items: center; gap: 11px; }
.hr-city strong { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.hr-city small { color: rgba(255, 255, 255, 0.6); font-size: 12px; }
.hr-city-right { text-align: right; }
.hr-mid { font-size: 11px; color: var(--blue-300); letter-spacing: .12em;
  border: 1px solid rgba(96, 165, 250, .3); padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(37, 99, 235, .12); white-space: nowrap; }
.hero-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-dark);
}
.hero-card-stats > div { padding: 15px 18px; display: flex; flex-direction: column; gap: 2px; }
.hero-card-stats > div + div { border-left: 1px solid var(--border-dark); }
.hcs-val { font-size: 15px; font-weight: 600; color: #fff; }
.hcs-blue { color: var(--blue-400); }
.hero-card-stats small { color: rgba(255, 255, 255, 0.6); font-size: 11.5px; }

/* flags */
.flag {
  position: relative; display: inline-block; width: 34px; height: 24px; flex: none;
  border-radius: 5px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.flag svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flag-lg { width: 44px; height: 31px; border-radius: 6px; }
.flag-dz { background: #006233; }
.flag-dz-white { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #fff; }
.flag-dz svg { z-index: 1; }

/* ═══ PARTENAIRES ═══ */
.trusted { padding: 44px 0; border-bottom: 1px solid var(--border); background: var(--white); }
.trusted-label { text-align: center; font-size: 13px; color: var(--ink-muted);
  margin-bottom: 24px; font-weight: 500; }
.marquee { overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% / 3)); } }
.m-item {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  color: rgba(11, 22, 51, 0.38);
  margin-right: 72px;
  transition: color var(--dur-1) var(--ease);
}
.m-item:hover { color: var(--blue-600); }
.mw-barid { letter-spacing: 0.08em; font-size: 16px; align-self: center; }
.mw-1688 { font-family: var(--font-mono); font-weight: 600; }
.mw-alibaba { font-weight: 600; }
.mw-zr { font-style: italic; }

/* ═══ CHIFFRES ═══ */
.stats { background: var(--white); padding: clamp(56px, 7vw, 88px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 8px; }
.stat-val { font-size: clamp(34px, 4vw, 48px); font-weight: 600; color: var(--blue-800);
  letter-spacing: -0.02em; display: block; line-height: 1.1; }
.stat-label { color: var(--ink-muted); font-size: 14px; margin-top: 8px; display: block; }

/* ═══ SERVICES : liste éditoriale ═══ */
.services { background: var(--ice); }
.services .section-head-left { margin-bottom: clamp(40px, 5vw, 64px); }
.svc-list { border-bottom: 1px solid var(--border); }
.svc-row {
  display: grid; grid-template-columns: 84px 260px 1fr auto;
  gap: 24px; align-items: baseline;
  padding: 28px 16px;
  border-top: 1px solid var(--border);
  transition: background var(--dur-2) var(--ease);
  border-radius: 4px;
}
.svc-row:hover { background: rgba(255, 255, 255, 0.85); }
.svc-num {
  font-size: 15px; font-weight: 500; color: var(--blue-600);
  transition: transform var(--dur-2) var(--ease);
}
.svc-row:hover .svc-num { transform: translateX(6px); }
.svc-row h3 { font-size: 20px; }
.svc-row p { color: var(--ink-muted); font-size: 15px; max-width: 52ch; }
.svc-meta {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--blue-800); background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
  padding: 5px 11px; border-radius: var(--r-pill);
  white-space: nowrap; justify-self: end;
}

/* ═══ ITINÉRAIRE ═══ */
.route {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(110% 80% at 50% -10%, #12245c 0%, var(--navy-900) 48%, var(--navy-950) 100%);
}
.route .section-head-left { margin-bottom: clamp(40px, 5vw, 64px); }
.route-bg { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute; height: 60px; width: 190px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05); filter: blur(18px);
}
.c1 { top: 18%; left: -190px; animation: cloudmove 34s linear infinite; }
.c2 { top: 46%; left: -260px; width: 260px; animation: cloudmove 46s linear 8s infinite; }
.c3 { top: 68%; left: -160px; width: 150px; animation: cloudmove 40s linear 18s infinite; }
@keyframes cloudmove { to { transform: translateX(calc(100vw + 320px)); } }

.route-map {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-dark);
  border-radius: calc(var(--r-lg) + 6px);
  padding: clamp(16px, 3vw, 36px);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.65);
}
.route-svg { width: 100%; height: auto; }
#routeProgress { stroke-dasharray: 1; stroke-dashoffset: 1; }

.route-endpoint {
  position: absolute; display: flex; align-items: center; gap: 12px;
  background: rgba(10, 18, 36, 0.85); backdrop-filter: blur(10px);
  border: 1px solid var(--border-dark); border-radius: var(--r-md);
  padding: 10px 16px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.route-endpoint strong { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.route-endpoint small { color: rgba(255, 255, 255, 0.62); font-size: 12px; }
.route-endpoint-cn { right: 2.5%; bottom: 13%; }
.route-endpoint-dz { left: 2.5%; bottom: 20%; }

.route-readout {
  position: absolute; top: clamp(14px, 2.5vw, 28px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.88);
  background: rgba(10, 18, 36, 0.85); border: 1px solid var(--border-dark);
  padding: 9px 16px; border-radius: var(--r-pill); white-space: nowrap;
}
.route-day { color: var(--blue-400); }

.route-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: clamp(36px, 5vw, 56px);
}
.route-steps li {
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border-dark);
  border-radius: var(--r-md); padding: 20px 22px;
}
.rs-dot { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 14px; }
.rs-cn { background: #FFDE00; box-shadow: 0 0 14px rgba(255, 222, 0, 0.6); }
.rs-air { background: var(--blue-500); box-shadow: 0 0 14px rgba(59, 130, 246, 0.6); }
.rs-sky { background: var(--blue-300); box-shadow: 0 0 14px rgba(147, 197, 253, 0.6); }
.rs-dz { background: var(--green); box-shadow: 0 0 14px rgba(46, 204, 113, 0.6); }
.route-steps strong { display: block; font-size: 15px; margin-bottom: 4px; }
.route-steps small { color: rgba(255, 255, 255, 0.62); font-size: 12.5px; line-height: 1.5; }

/* ═══ PROCESSUS : timeline ═══ */
.process { background: var(--white); }
.timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  position: relative;
}
.tl-step { position: relative; padding-top: 4px; }
.tl-node {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--blue-600);
  color: var(--blue-800); font-size: 15px; font-weight: 600;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.tl-step::before {
  content: ""; position: absolute; top: 24px; left: 52px; right: -20px;
  height: 1.5px; background: linear-gradient(90deg, rgba(37, 99, 235, 0.35), rgba(37, 99, 235, 0.1));
}
.tl-step:last-child::before { display: none; }
.tl-step h3 { margin-bottom: 8px; }
.tl-step p { color: var(--ink-muted); font-size: 14.5px; max-width: 30ch; }

/* ═══ PLATEFORME ═══ */
.data { background: var(--ice); overflow: hidden; }
.data-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.data-copy .section-head-left { margin-bottom: 36px; }
.data-points { display: flex; flex-direction: column; gap: 22px; margin-bottom: 36px; }
.data-points li { display: flex; gap: 16px; align-items: flex-start; }
.dp-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--border); color: var(--blue-600);
  box-shadow: var(--sh-md);
}
.dp-ico svg { width: 20px; height: 20px; }
.data-points strong { display: block; font-size: 15.5px; }
.data-points small { color: var(--ink-muted); font-size: 13.5px; }

.dash {
  background: var(--navy-900);
  border: 1px solid var(--border-dark);
  border-radius: calc(var(--r-lg) + 4px);
  box-shadow: var(--sh-lg), 0 0 0 8px rgba(37, 99, 235, 0.04);
  overflow: hidden; color: #fff;
}
.dash-head { display: flex; align-items: center; gap: 7px; padding: 15px 20px;
  border-bottom: 1px solid var(--border-dark); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border-dark); }
.kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; }
.kpi + .kpi { border-left: 1px solid var(--border-dark); }
.kpi small { color: rgba(255, 255, 255, 0.6); font-size: 11px; }
.kpi strong { font-size: 21px; font-weight: 600; }
.kpi-up { font-size: 10.5px; color: var(--green); }
.dash-chart { padding: 18px 20px 6px; }
.dash-chart svg { width: 100%; height: 110px; }
.chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .chart-area { opacity: 0; }
.dash.on .chart-line { animation: drawline 1.6s var(--ease) 0.3s forwards; }
.dash.on .chart-area { animation: fadein 1s var(--ease) 1s both; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.dash-rows { padding: 8px 8px 12px; }
.dash-row {
  display: grid; grid-template-columns: 92px 1fr auto 84px; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: var(--r-sm);
  font-size: 13px; color: rgba(255, 255, 255, 0.82);
  transition: background var(--dur-1) var(--ease);
}
.dash-row:hover { background: rgba(255, 255, 255, 0.05); }
.dr-id { color: rgba(255, 255, 255, 0.6); font-size: 11.5px; }
.dr-amt { text-align: right; font-size: 12px; }
.dr-badge {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.dr-ok { color: var(--green); background: rgba(46, 204, 113, 0.12); border: 1px solid rgba(46, 204, 113, 0.25); }
.dr-transit { color: var(--blue-400); background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.25); }
.dr-stock { color: #FBBF24; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25); }

/* ═══ TARIFS ═══ */
.pricing { background: var(--white); }
.pricing-wrap {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 24px;
  max-width: 980px; margin-inline: auto; align-items: stretch;
}
.price-card {
  position: relative;
  background: radial-gradient(120% 120% at 20% 0%, #16307e 0%, var(--navy-900) 60%, var(--navy-950) 100%);
  color: #fff; border-radius: calc(var(--r-lg) + 4px);
  padding: 38px 34px;
  box-shadow: var(--sh-lg), var(--sh-glow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.price-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent);
}
.price-badge {
  position: relative;
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; letter-spacing: 0.16em; font-weight: 600; color: var(--blue-300);
  border: 1px solid rgba(147, 197, 253, 0.35); background: rgba(10, 18, 36, 0.55);
  padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 26px;
}
.price-amount { position: relative; display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.price-val { font-size: 74px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.price-val small { font-size: 26px; font-weight: 500; color: var(--blue-400); }
.price-per { color: rgba(255, 255, 255, 0.68); font-size: 15px; }
.price-facts { position: relative; display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; }
.price-facts li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: rgba(255, 255, 255, 0.88); }
.chip-check {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none;
  border-radius: 50%; background: rgba(46, 204, 113, 0.16); color: var(--green);
  font-size: 11px; font-weight: 700;
}
.price-note { position: relative; margin-top: 16px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }

.price-included {
  border: 1px solid var(--border); border-radius: calc(var(--r-lg) + 4px);
  padding: 34px; background: var(--ice);
  display: flex; flex-direction: column;
}
.pi-label { font-size: 11px; letter-spacing: 0.18em; font-weight: 600; color: var(--blue-600); margin-bottom: 24px; }
.pi-list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pi-list li {
  display: flex; gap: 16px; align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 15px 18px;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pi-list li:hover { transform: translateX(5px); box-shadow: var(--sh-md); border-color: rgba(37, 99, 235, 0.25); }
.pi-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-100), rgba(219, 234, 254, 0.4));
  color: var(--blue-800); border: 1px solid rgba(37, 99, 235, 0.14);
}
.pi-ico svg { width: 20px; height: 20px; }
.pi-list strong { display: block; font-size: 14.5px; }
.pi-list small { color: var(--ink-muted); font-size: 12.5px; }
.pi-note {
  display: flex; align-items: center; gap: 9px; margin-top: 20px;
  color: var(--ink-muted); font-size: 13px;
}
.pi-note svg { color: var(--blue-600); flex: none; }

/* ═══ FAQ : split éditorial ═══ */
.faq { background: var(--ice); }
.faq-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
.faq-intro { position: sticky; top: 110px; }
.faq-intro h2 { margin-bottom: 4px; }
.faq-intro .section-sub { margin-bottom: 28px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.faq-item[open] { box-shadow: var(--sh-md); border-color: rgba(37, 99, 235, 0.22); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 24px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev {
  width: 26px; height: 26px; flex: none; border-radius: 50%; position: relative;
  background: rgba(37, 99, 235, 0.07); border: 1px solid rgba(37, 99, 235, 0.16);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.faq-chev::before, .faq-chev::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.8px;
  background: var(--blue-600); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease);
}
.faq-chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-chev { transform: rotate(45deg); }
.faq-body { padding: 0 24px 22px; color: var(--ink-muted); font-size: 14.5px; max-width: 62ch; }
.faq-body strong { color: var(--ink); }

/* ═══ CTA ═══ */
.cta {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: radial-gradient(130% 110% at 50% -20%, #16307e 0%, var(--navy-900) 55%, var(--navy-950) 100%);
}
.cta-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-inner { position: relative; }
.cta h2 { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 18px; }
.cta p { color: rgba(255, 255, 255, 0.68); font-size: 17px; margin-bottom: 38px; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ═══ FOOTER ═══ */
.footer { background: var(--navy-950); color: rgba(255, 255, 255, 0.68); }
.footer-inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
  padding: clamp(56px, 7vw, 80px) 0 48px;
}
.footer-brand p { font-size: 13.5px; margin-top: 18px; line-height: 1.7; }
.footer-title { font-size: 10.5px; letter-spacing: 0.18em; font-weight: 600;
  color: rgba(255, 255, 255, 0.58); margin-bottom: 18px; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14px; transition: color var(--dur-1) var(--ease); width: fit-content; }
.footer-col a:hover { color: #fff; }
.footer-meta { font-size: 13.5px; line-height: 1.8; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 24px 0 32px; border-top: 1px solid var(--border-dark);
  font-size: 13px; color: rgba(255, 255, 255, 0.58);
}
.footer-route { font-size: 11px; letter-spacing: 0.14em; color: var(--blue-400); }

/* ═══ PAUSE ANIMATIONS (WCAG 2.2.2) ═══ */
.anim-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 18, 36, 0.78); color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.anim-toggle:hover { transform: scale(1.08); background: rgba(10, 18, 36, 0.95); }
.anim-toggle .ico-play { display: none; }
body.anim-paused .anim-toggle .ico-pause { display: none; }
body.anim-paused .anim-toggle .ico-play { display: block; }
body.anim-paused .marquee-track,
body.anim-paused .cloud,
body.anim-paused .pulse-dot,
body.anim-paused .ping,
body.anim-paused .hero-card,
body.anim-paused .hero-glow,
body.anim-paused .hero-stars span { animation-play-state: paused; }

/* ═══ REVEAL ═══ */
/* gated on .js so content is never hidden if JavaScript fails */
.js .reveal { opacity: 0; transform: translateY(26px); }
.reveal.in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.d-1.in { transition-delay: 80ms; }
.d-2.in { transition-delay: 160ms; }
.d-3.in { transition-delay: 240ms; }
.d-4.in { transition-delay: 320ms; }
.d-5.in { transition-delay: 400ms; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .nav-links, .nav-actions { display: none; }
  .nav-burger { display: block; margin-left: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-card { max-width: 560px; }
  .hero { padding-top: 110px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .svc-row { grid-template-columns: 56px 1fr auto; }
  .svc-row p { grid-column: 2 / -1; }
  .route-steps { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  .tl-step::before { right: -14px; }
  .tl-step:nth-child(2)::before { display: none; }
  .data-grid { grid-template-columns: 1fr; }
  .pricing-wrap { grid-template-columns: 1fr; max-width: 620px; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .hero-title { font-size: clamp(32px, 9vw, 44px); }
  .hero-ctas .btn { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-row { grid-template-columns: 1fr auto; padding: 24px 8px; }
  .svc-num { grid-row: 1; }
  .svc-row h3 { grid-column: 1; }
  .svc-row p { grid-column: 1 / -1; }
  .svc-meta { grid-row: 1; }
  .route-steps { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 32px; }
  .tl-step::before { display: none; }
  .route-map { display: flex; flex-direction: column; }
  .route-map .route-svg { order: 1; }
  .route-readout { position: static; transform: none; order: 0; width: fit-content; margin: 0 auto 14px; }
  .route-endpoint { position: static; margin-top: 10px; order: 2; }
  .hero-card-stats > div { padding: 12px 14px; }
  .dash-row { grid-template-columns: 80px 1fr auto; }
  .dr-amt { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .cta-actions .btn { width: 100%; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal, .reveal { opacity: 1; transform: none; }
  .hero-card { animation: none; }
  .js .chart-area { opacity: 1; }
  .chart-line { stroke-dashoffset: 0; }
  #routeProgress { stroke-dashoffset: 0; }
  .anim-toggle { display: none; }
}