/* ==========================================================================
   MS LOGISTIQUE — couche de marque v2
   Charte : bleu (#0040e0 — logo) + blanc dominant, gris neutres.
   Direction artistique inspirée d'Alignova (ombres teintées, cartes qui
   se soulèvent au survol, zoom lent des visuels, transitions douces,
   apparition au défilement). Aucun texte ni fonctionnalité d'Alignova.
   ========================================================================== */
:root {
  --ms-blue:        #0040e0;   /* bleu logo — actions principales */
  --ms-blue-dark:   #0030b0;   /* états actifs / pressés */
  --ms-blue-hover:  #1f5cff;   /* survol */
  --ms-blue-tint:   #eef3fc;   /* fonds secondaires, encadrés */
  --ms-blue-soft:   #c9d9fb;   /* bordures d'accent */
  --ms-navy:        #0b1f4b;   /* texte et surfaces sombres */
  --ms-grey-700:    #4a5568;   /* texte secondaire */
  --ms-grey-500:    #7a8699;
  --ms-grey-200:    #dce4f2;   /* bordures, séparateurs */
  --ms-white:       #ffffff;
  --ms-shadow-sm:   0 2px 6px rgba(11,31,75,.06);
  --ms-shadow-md:   0 10px 30px rgba(11,31,75,.10);
  --ms-shadow-lg:   0 24px 60px rgba(11,31,75,.16);
  --ms-radius:      14px;
  --ms-ease:        cubic-bezier(.2,.7,.2,1);
  --ms-font-body:   'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ms-font-head:   'Manrope', 'DM Sans', system-ui, sans-serif;
}

body { font-family: var(--ms-font-body); color: var(--ms-navy); background: var(--ms-white); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .section-title { font-family: var(--ms-font-head); letter-spacing: -.02em; }

/* Boutons : micro-interactions */
.btn, button.btn, a.btn, .btn-primary, .btn-cta {
  transition: transform .25s var(--ms-ease), box-shadow .25s var(--ms-ease), background-color .25s var(--ms-ease), color .25s var(--ms-ease);
  border-radius: 10px;
}
.btn:hover, .btn-primary:hover, .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,64,224,.22); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(0,64,224,.35); outline-offset: 2px;
}

/* Cartes et blocs produit */
.card, .product-card, .vehicle-card, .service-card, .feature-card, .tip-card {
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-sm);
  transition: transform .45s var(--ms-ease), box-shadow .45s var(--ms-ease);
}
.card:hover, .product-card:hover, .vehicle-card:hover, .service-card:hover, .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ms-shadow-lg);
}
.product-card img, .vehicle-card img, .card img, .service-card img {
  transition: transform .8s var(--ms-ease);
}
.product-card:hover img, .vehicle-card:hover img, .card:hover img { transform: scale(1.05); }

/* Navigation : en-tête fixe et translucide */
.site-header, header.header, .header {
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.nav-link, .main-nav a, nav a { transition: color .2s var(--ms-ease); position: relative; }
.nav-link::after, .main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--ms-blue); transition: width .3s var(--ms-ease);
}
.nav-link:hover::after, .main-nav a:hover::after { width: 100%; }

/* Apparition au défilement */
.reveal { transition: opacity .8s var(--ms-ease), transform .8s var(--ms-ease); }
.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Blocs de suivi de commande */
.ms-track { display: grid; gap: 0; margin: 24px 0; padding: 0; list-style: none; }
.ms-track li { position: relative; padding: 0 0 26px 40px; color: var(--ms-grey-700); }
.ms-track li::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--ms-grey-200); }
.ms-track li:last-child::before { display: none; }
.ms-track li::after { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ms-white); border: 2px solid var(--ms-grey-200); box-sizing: border-box; }
.ms-track li.done { color: var(--ms-navy); }
.ms-track li.done::after { background: var(--ms-blue); border-color: var(--ms-blue); box-shadow: 0 0 0 4px rgba(0,64,224,.12); }
.ms-track li.done::before { background: var(--ms-blue); }
.ms-track li.current { color: var(--ms-blue); font-weight: 700; }
.ms-track li.current::after { border-color: var(--ms-blue); }
.ms-track li.cancelled::after { background: #d64545; border-color: #d64545; }
.ms-track small { display: block; color: var(--ms-grey-500); font-size: .82rem; margin-top: 2px; }

.ms-progress { height: 8px; background: var(--ms-blue-tint); border-radius: 999px; overflow: hidden; }
.ms-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ms-blue), var(--ms-blue-hover)); border-radius: inherit; transition: width .8s var(--ms-ease); }

.ms-tracking-card { background: var(--ms-white); border: 1px solid var(--ms-grey-200); border-radius: 18px; box-shadow: var(--ms-shadow-md); padding: 28px; max-width: 760px; margin: 0 auto; }
.ms-tracking-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.ms-tracking-form label { display: block; font-size: .85rem; color: var(--ms-grey-700); margin-bottom: 4px; font-weight: 600; }
.ms-tracking-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--ms-grey-200); border-radius: 10px; font: inherit; }
.ms-tracking-form input:focus { border-color: var(--ms-blue); outline: none; box-shadow: 0 0 0 3px rgba(0,64,224,.15); }
.ms-alert { padding: 12px 16px; border-radius: 10px; margin: 14px 0; background: var(--ms-blue-tint); color: var(--ms-navy); border: 1px solid var(--ms-blue-soft); }
.ms-alert--error { background: #fdecec; border-color: #f5b5b5; color: #7a1b1b; }

@media (max-width: 640px) {
  .ms-tracking-form { grid-template-columns: 1fr; }
  .ms-tracking-card { padding: 20px; }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal:not(.is-visible) { opacity: 1; transform: none; }
}