/* ==========================================================================
   NavAir Distribution — Design System
   Police : Montserrat · Couleurs : Navy #0F172A / Orange #FF6B00
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* ===== Palette corporate : bleu nuit + gris froids + 1 accent orange ===== */
  --navy-900: #0a1a33;   /* bleu nuit profond (marque) */
  --navy-800: #122742;
  --navy-700: #1f3a5c;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e4e8ee;
  --slate-100: #eef1f5;
  --slate-50: #f6f8fb;
  --bg-soft: #f6f8fb;

  /* Accent unique — réservé aux actions clés */
  --orange: #ea5b0c;
  --orange-dark: #c94d08;
  --orange-light: #ea5b0c;
  /* "blue" conservé comme variable mais aligné sur le bleu nuit (plus d'accent bleu vif) */
  --blue: #1f3a5c;

  --white: #ffffff;

  /* Typo */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rayons — discrets, corporate */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-full: 999px;

  /* Ombres — très légères (on privilégie les bordures fines) */
  --shadow-sm: 0 1px 2px rgba(10, 26, 51, 0.05);
  --shadow-md: 0 4px 14px rgba(10, 26, 51, 0.07);
  --shadow-lg: 0 10px 30px rgba(10, 26, 51, 0.10);
  --shadow-orange: 0 6px 16px rgba(234, 91, 12, 0.18);
  --shadow-navy: 0 6px 16px rgba(10, 26, 51, 0.14);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 1200px;
  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--navy-900);
  background: var(--white);
  line-height: 1.6;
  font-weight: 500;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}

h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
}

h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
}

p {
  color: var(--slate-500);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--orange);
}

.section-title {
  margin: 14px 0 16px;
}

.section-lead {
  font-size: 1.05rem;
  color: var(--slate-500);
  max-width: 580px;
}

/* Accent de titre : couleur unie (plus de dégradé) */
.text-gradient {
  color: var(--orange);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding: clamp(64px, 9vw, 120px) 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 56px;
}

.section-head .section-lead {
  text-align: center;
}

.grid {
  display: grid;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background 0.3s var(--ease);
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--orange-dark);
}

.btn-dark {
  background: var(--navy-900);
  color: var(--white);
}

.btn-dark:hover {
  background: var(--navy-800);
}

.btn-ghost {
  background: var(--white);
  color: var(--navy-900);
  border: 1px solid var(--slate-300);
}

.btn-ghost:hover {
  border-color: var(--navy-900);
  background: var(--slate-50);
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. NAVBAR
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav {
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
}

.nav.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--white);
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid var(--slate-200);
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand span b {
  color: var(--orange);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--navy-800);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.nav-links a:hover {
  background: var(--slate-100);
  color: var(--orange);
}

.nav-links a.active {
  color: var(--orange);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Bloc CTA visible uniquement dans le menu mobile ouvert */
.nav-mobile-cta {
  display: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--slate-100);
  place-items: center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle span::before {
  transform: translateY(-6px);
}

.nav-toggle span::after {
  transform: translateY(4px);
}

body.menu-open .nav-toggle span {
  background: transparent;
}

body.menu-open .nav-toggle span::before {
  transform: rotate(45deg);
}

body.menu-open .nav-toggle span::after {
  transform: rotate(-45deg) translateY(-1px);
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 88px);
  padding-bottom: 96px;
  overflow: hidden;
  background: var(--navy-900);
  isolation: isolate;
}

/* Vidéo de fond */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Voile bleu nuit pour la lisibilité du texte */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(8, 20, 40, 0.94) 0%, rgba(8, 20, 40, 0.80) 42%, rgba(8, 20, 40, 0.45) 100%),
    linear-gradient(to top, rgba(8, 20, 40, 0.55), transparent 38%);
}

/* compat : ancien fond grille neutralisé dans le hero vidéo */
.hero .hero-bg, .hero-blob { display: none; }

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  backdrop-filter: blur(2px);
}

.hero-badge i {
  display: grid;
  place-items: center;
  color: var(--orange);
  font-style: normal;
}

/* Chips factuelles dans le hero (remplacent l'ancien badge / la note clients) */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
}
.hero-chip svg {
  width: 15px;
  height: 15px;
  color: var(--orange);
  flex-shrink: 0;
}

.hero h1 {
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
}

.hero-lead {
  font-size: 1.12rem;
  max-width: 500px;
  margin-bottom: 32px;
  color: var(--slate-200);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  gap: 40px;
}

.hero-stat .num {
  font-size: 1.85rem;
  font-weight: 800;
  color: #fff;
}

.hero-stat .lbl {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-300);
}

/* Mobile / data-saver : pas de vidéo, on garde l'image poster */
@media (max-width: 768px) {
  .hero-video { display: none; }
  .hero {
    background: var(--navy-900) url('../assets/video/poster.jpg') center / cover no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero {
    background: var(--navy-900) url('../assets/video/poster.jpg') center / cover no-repeat;
  }
}

/* Carte de suivi flottante (glassmorphism) */
.track-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
}

.track-card h3 {
  margin-bottom: 6px;
}

.track-card p {
  font-size: 0.92rem;
  margin-bottom: 22px;
}

.track-field {
  display: flex;
  gap: 10px;
}

.track-input {
  flex: 1;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--slate-200);
  background: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy-900);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.track-input::placeholder {
  color: var(--slate-400);
  font-weight: 500;
}

.track-input:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(31, 58, 92, 0.12);
}

.track-btn {
  display: grid;
  place-items: center;
  width: 54px;
  border-radius: var(--r-md);
  background: var(--orange);
  color: var(--white);
  transition: background 0.2s var(--ease);
}

.track-btn:hover {
  background: var(--orange-dark);
}

.track-hint {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--slate-400);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mini-stepper de progression (sans icônes) */
.track-mini {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
  display: flex;
  justify-content: space-between;
  position: relative;
}

.track-mini::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: var(--slate-200);
}

.track-mini-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.track-mini-item .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--slate-300);
}

.track-mini-item.done .dot {
  background: var(--orange);
  border-color: var(--orange);
}

.track-mini-item span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--slate-500);
}

/* --------------------------------------------------------------------------
   8. LOGOS / BANDEAU CONFIANCE
   -------------------------------------------------------------------------- */
.trust {
  padding: 36px 0;
  border-bottom: 1px solid var(--slate-100);
}

.trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0.65;
}

.trust-row span {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--slate-400);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   9. CARTES SERVICES / FEATURES
   -------------------------------------------------------------------------- */
.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: rgba(10, 26, 51, 0.06);
  color: var(--navy-900);
}

.card-icon.orange {
  background: rgba(234, 91, 12, 0.10);
  color: var(--orange);
}

.card-icon.blue {
  background: rgba(10, 26, 51, 0.06);
  color: var(--navy-700);
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  font-size: 0.95rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--orange);
  transition: gap 0.25s var(--ease);
}

.card:hover .card-link {
  gap: 12px;
}

/* --------------------------------------------------------------------------
   10. ÉTAPES / TIMELINE "Comment ça marche"
   -------------------------------------------------------------------------- */
.steps {
  grid-template-columns: repeat(4, 1fr);
  counter-reset: step;
}

.step {
  position: relative;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: var(--white);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 18px;
}

.step h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.step p {
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   11. SECTION SOMBRE / STATS
   -------------------------------------------------------------------------- */
.dark-section {
  background: var(--navy-900);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.dark-section h2,
.dark-section h3 {
  color: var(--white);
}

.dark-section p {
  color: var(--slate-300);
}

.stats-row {
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 1;
}

.stat-box {
  text-align: center;
}

.stat-box .num {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  font-weight: 800;
  color: var(--white);
}

.stat-box .num span[data-count],
.hero-stat .num span[data-count] { color: inherit; }

.stat-box .lbl {
  color: var(--slate-400);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   12. "POURQUOI NOUS" — split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 30px;
}

.feature-item {
  display: flex;
  gap: 16px;
}

.feature-check {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(10, 26, 51, 0.06);
  color: var(--navy-900);
}

.feature-item h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.feature-item p {
  font-size: 0.92rem;
}

.split-visual {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--navy-900);
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  display: grid;
  place-items: center;
}

.split-visual .plane {
  font-size: 9rem;
  color: rgba(255, 255, 255, 0.08);
  position: absolute;
  transform: rotate(-20deg);
}

.split-visual .glass-pill {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  padding: 14px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.glass-pill.p1 {
  top: 18%;
  left: 12%;
}
.glass-pill.p2 {
  bottom: 22%;
  right: 10%;
}
.glass-pill .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}

/* --------------------------------------------------------------------------
   13. CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--navy-900);
  padding: clamp(40px, 6vw, 64px);
  text-align: center;
  color: #fff;
  overflow: hidden;
  border-top: 3px solid var(--orange);
}

.cta h2 {
  color: #fff;
  margin-bottom: 14px;
}

.cta p {
  color: var(--slate-300);
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
}

.cta .btn-light {
  background: var(--orange);
  color: #fff;
}

.cta .btn-light:hover {
  background: var(--orange-dark);
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy-900);
  color: var(--slate-300);
  padding-top: 72px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}

.footer .brand {
  color: #fff;
  margin-bottom: 18px;
}

.footer-about p {
  color: var(--slate-400);
  font-size: 0.92rem;
  max-width: 320px;
  margin-bottom: 22px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate-300);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.footer-social a:hover {
  background: var(--orange);
  color: #fff;
}

.footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col a {
  display: block;
  color: var(--slate-400);
  font-size: 0.92rem;
  padding: 6px 0;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.footer-col a:hover {
  color: var(--orange);
  padding-left: 6px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--slate-500);
}

/* --------------------------------------------------------------------------
   15. PAGE HEADER (sous-pages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding: calc(var(--nav-h) + 56px) 0 56px;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero .hero-bg {
  z-index: 0;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--slate-400);
  margin-top: 16px;
}

.breadcrumb a:hover {
  color: var(--orange);
}

/* --------------------------------------------------------------------------
   16. ANIMATIONS REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* L'état masqué initial ne s'applique QUE si le JS est actif.
   Sans JS, le contenu reste pleinement visible. */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

.js-ready [data-reveal].in {
  opacity: 1;
  transform: none;
}

[data-reveal-delay='1'] {
  transition-delay: 0.08s;
}
[data-reveal-delay='2'] {
  transition-delay: 0.16s;
}
[data-reveal-delay='3'] {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero .container > * { min-width: 0; }
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .nav-links,
  .nav-cta .btn {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  /* Menu mobile */
  .nav-links.open {
    display: flex;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 20px 24px 28px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--slate-200);
    box-shadow: var(--shadow-md);
  }

  .nav-links.open > a {
    padding: 14px 16px;
    font-size: 1rem;
  }

  .nav-links.open .nav-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--slate-200);
  }

  .nav-links.open .nav-mobile-cta .btn {
    display: inline-flex;
  }

  .cards-3,
  .stats-row {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 16px 28px;
  }
  .hero h1 { overflow-wrap: break-word; }
  .hero-lead { max-width: 100%; }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   18. PAGE SUIVI — recherche + timeline
   ========================================================================== */
.track-page {
  max-width: 760px;
  margin-inline: auto;
}

.track-search {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  margin-bottom: 32px;
}

.track-search .track-field {
  margin-top: 6px;
}

.track-result {
  display: none;
}

.track-result.show {
  display: block;
  animation: fadeUp 0.5s var(--ease);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

.result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--navy-900);
  color: #fff;
  padding: 28px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.result-head h3 {
  color: #fff;
  font-size: 1.4rem;
}

.result-head .sub {
  color: var(--slate-400);
  font-size: 0.88rem;
  margin-top: 2px;
}

.status-badge {
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 800;
  background: rgba(255, 107, 0, 0.18);
  color: var(--orange-light);
  border: 1px solid rgba(255, 107, 0, 0.3);
}

.result-body {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 32px;
}

.result-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.meta-box {
  background: var(--slate-50);
  border-radius: var(--r-md);
  padding: 16px;
}

.meta-box .k {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
}

.meta-box .v {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-900);
  margin-top: 4px;
}

/* Timeline verticale */
.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--slate-200);
}

.tl-step {
  position: relative;
  padding-bottom: 30px;
}

.tl-step:last-child {
  padding-bottom: 0;
}

.tl-dot {
  position: absolute;
  left: -40px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--slate-200);
  display: grid;
  place-items: center;
  color: var(--slate-300);
  z-index: 1;
}

.tl-step.done .tl-dot {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.tl-step.current .tl-dot {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(15, 23, 42, 0.12);
}

.tl-step h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy-900);
}

.tl-step.pending h4 {
  color: var(--slate-400);
}

.tl-step p {
  font-size: 0.86rem;
  margin-top: 2px;
}

.track-empty {
  display: none;
  text-align: center;
  padding: 50px 20px;
  color: var(--slate-500);
}

.track-empty.show {
  display: block;
}

.track-empty .ic {
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--slate-100);
  color: var(--slate-400);
}

/* ==========================================================================
   19. PAGE TARIFS — pricing + calculateur
   ========================================================================== */
.pricing-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin-inline: auto;
}

.price-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 36px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.price-card.featured {
  border: 2px solid var(--orange);
  position: relative;
}

.price-tag {
  position: absolute;
  top: -13px;
  right: 28px;
  background: var(--orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--r-full);
  letter-spacing: 0.04em;
}

.price-card .mode {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.price-card .mode .ic {
  width: 50px;
  height: 50px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--slate-100);
  color: var(--navy-900);
}

.price-card .mode.air .ic {
  background: rgba(255, 107, 0, 0.12);
  color: var(--orange);
}

.price-card .mode.sea .ic {
  background: rgba(10, 26, 51, 0.06);
  color: var(--navy-700);
}

.price-card .price {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy-900);
}

.price-card .price small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-400);
}

.price-card .price-desc {
  font-size: 0.92rem;
  margin: 8px 0 24px;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.price-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--slate-600);
}

.price-features li svg {
  flex-shrink: 0;
  color: var(--orange);
}

/* Calculateur */
.calc {
  max-width: 720px;
  margin: 56px auto 0;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}

.calc-toggle {
  display: flex;
  gap: 6px;
  background: var(--slate-100);
  border-radius: var(--r-md);
  padding: 5px;
  margin-bottom: 28px;
}

.calc-toggle button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--slate-500);
  transition: all 0.25s var(--ease);
}

.calc-toggle button.active {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.calc-fields {
  display: grid;
  gap: 18px;
}

.calc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500);
  margin-bottom: 8px;
}

.field input,
.field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--slate-200);
  background: var(--slate-50);
  font-weight: 600;
  color: var(--navy-900);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1);
  background: #fff;
}

.calc-result {
  margin-top: 28px;
  background: var(--navy-900);
  border-radius: var(--r-md);
  padding: 26px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.calc-result .lbl {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.calc-result .amount {
  font-size: 2.2rem;
  font-weight: 900;
}

/* ==========================================================================
   20. PAGE CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-item {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
}

.contact-item .ic {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: #fff;
}

.contact-item h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.contact-item p {
  font-size: 0.92rem;
}

.contact-form {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 18px;
}

.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--slate-200);
  background: var(--slate-50);
  font-weight: 500;
  color: var(--navy-900);
  resize: vertical;
  min-height: 130px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1);
  background: #fff;
}

.form-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--slate-400);
  text-align: center;
}

.form-success {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
}

.form-success.show {
  display: block;
}

/* Services détaillés */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 80px;
}

.service-detail:last-child {
  margin-bottom: 0;
}

.service-detail.reverse .service-visual {
  order: -1;
}

.service-visual {
  border-radius: var(--r-xl);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  font-size: 6rem;
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.service-visual.air {
  background: var(--orange);
}

.service-visual.sea {
  background: var(--navy-700);
}

.service-visual.track {
  background: var(--navy-900);
}

@media (max-width: 768px) {
  .pricing-grid,
  .contact-grid,
  .service-detail,
  .form-row,
  .result-meta,
  .calc-row {
    grid-template-columns: 1fr;
  }
  .service-detail.reverse .service-visual {
    order: 0;
  }
}

/* ==========================================================================
   21. AUTH (connexion / inscription)
   ========================================================================== */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 100px 24px 60px;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.auth-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: var(--r-md);
  background: #fff;
  display: grid;
  place-items: center;
  padding: 10px;
  box-shadow: 0 8px 22px rgba(255, 107, 0, 0.2);
}

.auth-card h1 {
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 6px;
}

.auth-card .auth-sub {
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.auth-field {
  margin-bottom: 16px;
}

.auth-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500);
  margin-bottom: 8px;
}

.auth-field input {
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--slate-200);
  background: #fff;
  font-weight: 600;
  color: var(--navy-900);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.auth-field input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12);
}

.auth-error {
  display: none;
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.auth-error.show {
  display: block;
}

.auth-foot {
  text-align: center;
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--slate-500);
}

.auth-foot a {
  color: var(--orange);
  font-weight: 700;
}

.auth-demo {
  margin-top: 20px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--slate-50);
  border: 1px dashed var(--slate-300);
  font-size: 0.8rem;
  color: var(--slate-500);
  text-align: center;
  line-height: 1.7;
}

.auth-demo b {
  color: var(--navy-800);
}

.auth-back {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy-800);
}

.auth-back:hover {
  color: var(--orange);
}

/* ==========================================================================
   22. LAYOUT APPLICATION (sidebar + contenu)
   ========================================================================== */
.app {
  min-height: 100vh;
  background: var(--bg-soft);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: linear-gradient(178deg, #0c1f3c 0%, var(--navy-900) 52%, #07142a 100%);
  color: var(--slate-300);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  z-index: 900;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.35s var(--ease);
}

.sidebar .brand {
  color: #fff;
  padding: 2px 10px 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
  scrollbar-width: none;
}
.side-nav::-webkit-scrollbar { width: 0; height: 0; }

.side-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5b6b86;
  padding: 18px 14px 7px;
}
.side-nav > .side-label:first-child { padding-top: 8px; }

.side-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #9fb0c9;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.16s var(--ease);
}

.side-nav a svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: color 0.22s var(--ease), opacity 0.22s var(--ease);
}

.side-nav a:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}
.side-nav a:hover svg { opacity: 1; color: #fff; }
.side-nav a:active { transform: scale(0.985); }

.side-nav a.active {
  background: linear-gradient(90deg, rgba(234, 91, 12, 0.22) 0%, rgba(234, 91, 12, 0.04) 100%);
  color: #fff;
}
.side-nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(234, 91, 12, 0.6);
}
.side-nav a.active svg { color: var(--orange); opacity: 1; }

.side-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 10px;
}

.side-user .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.side-user .info {
  min-width: 0;
}

.side-user .info .nm {
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-user .info .em {
  font-size: 0.76rem;
  color: #8497b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Déconnexion — action propre et discrète */
.side-logout {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-top: 4px;
  border-radius: 11px;
  color: #8497b3; font-weight: 600; font-size: 0.9rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.side-logout svg { width: 18px; height: 18px; }
.side-logout:hover { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }

.app-main {
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  height: 72px;
  background: rgba(246, 248, 251, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 500;
}

.app-topbar h1 {
  font-size: 1.2rem;
  font-weight: 800;
}

/* En-tête de page réutilisable dans le contenu */
.page-intro { margin-bottom: 22px; }
.page-intro h2 { font-size: 1.5rem; color: var(--navy-900); }
.page-intro p { color: var(--slate-500); font-size: 0.95rem; margin-top: 2px; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sidebar-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--slate-100);
  place-items: center;
  color: var(--navy-900);
}

.app-content {
  padding: 28px;
  flex: 1;
}

.demo-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(255, 107, 0, 0.1);
  border: 1px solid rgba(255, 107, 0, 0.25);
  color: var(--orange-dark);
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 24px;
}

.demo-banner.show {
  display: flex;
}

/* ---- Stat cards ---- */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.stat-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}

.stat-card .top {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
}

.stat-card .ic {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}
.stat-card .ic svg { width: 18px; height: 18px; }

.stat-card .ic.orange { background: rgba(234, 91, 12, 0.10); color: var(--orange); }
.stat-card .ic.blue { background: rgba(10, 26, 51, 0.06); color: var(--navy-700); }
.stat-card .ic.green { background: rgba(22, 101, 52, 0.10); color: #15803d; }
.stat-card .ic.navy { background: rgba(10, 26, 51, 0.06); color: var(--navy-900); }

.stat-card .val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1;
}

.stat-card .lbl {
  font-size: 0.85rem;
  color: var(--slate-500);
  font-weight: 600;
  margin-top: 6px;
}

/* ---- Panneau / carte de contenu ---- */
.panel {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--slate-100);
}

.panel-head h3 {
  font-size: 1.1rem;
}

.panel-body {
  padding: 24px;
}

/* ---- Table ---- */
.table-wrap {
  overflow-x: auto;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table.data th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
  padding: 14px 20px;
  border-bottom: 1px solid var(--slate-200);
  white-space: nowrap;
}

table.data td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--slate-100);
  color: var(--navy-800);
  font-weight: 500;
}

table.data tr:last-child td {
  border-bottom: none;
}

table.data tbody tr {
  transition: background 0.2s var(--ease);
}

table.data tbody tr:hover {
  background: var(--slate-50);
}

.td-strong {
  font-weight: 700;
  color: var(--navy-900);
}

.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--slate-600);
}

/* ---- Status badges ---- */
.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.badge.attente { background: #fff7ed; color: #c2410c; }
.badge.traitement { background: #fefce8; color: #a16207; }
.badge.transit { background: #eff6ff; color: #1d4ed8; }
.badge.recu { background: #f0fdf4; color: #15803d; }
.badge.livre { background: #f1f5f9; color: #475569; }

/* ---- Filtres (onglets) ---- */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filters button {
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.85rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  color: var(--slate-500);
  transition: all 0.2s var(--ease);
}

.filters button.active {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--navy-900);
}

/* ---- Empty state ---- */
.empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--slate-500);
}

.empty .ic {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--slate-100);
  display: grid;
  place-items: center;
  color: var(--slate-400);
}

/* ---- Profil ---- */
.profile-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.profile-head .avatar-lg {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.8rem;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.btn-danger:hover {
  background: #fee2e2;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 850;
}

.sidebar-overlay.show {
  display: block;
}

@media (max-width: 900px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
  }
  .sidebar-toggle {
    display: grid;
  }
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
  .app-content {
    padding: 18px;
  }
}

/* Responsivité — empêche le débordement horizontal sur petits écrans */
@media (max-width: 600px) {
  .app-topbar { padding: 0 14px; gap: 8px; }
  .app-topbar > * { min-width: 0; }
  .app-topbar h1 { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* `flex-shrink: 0` protégeait les boutons d'action, mais les rendait rigides :
     mesurés à 272 px sur un écran de 375, ils écrasaient le titre à 40 px et le
     sélecteur de pays à 19 px. Ils passent maintenant à la ligne au lieu de
     comprimer leurs voisins. */
  .topbar-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar-right .btn,
  .topbar-right .btn-primary,
  .topbar-right .btn-ghost { padding: 10px 12px; font-size: 0.82rem; }
  .contact-form { padding: 22px 18px; }
  .contact-item { padding: 16px; }
  .contact-info, .contact-form { min-width: 0; }
  .contact-item p, .contact-item h4 { overflow-wrap: anywhere; }
}

/* ==========================================================================
   23. MODAL DE PARTAGE + QR
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.open {
  display: flex;
  animation: fadeIn 0.25s var(--ease);
}

@keyframes fadeIn {
  from { opacity: 0; }
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: popUp 0.3s var(--ease);
}

@keyframes popUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.modal-close:hover {
  background: var(--slate-200);
  color: var(--navy-900);
}

.share-title {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.share-sub {
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.share-qr {
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.share-qr img {
  width: 200px;
  height: 200px;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-200);
  padding: 8px;
  background: #fff;
}

.share-link {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.share-link input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--slate-200);
  background: var(--slate-50);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--slate-600);
}

.share-copy {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: background 0.2s var(--ease);
}

.share-copy.copied {
  background: #16a34a;
}

.share-actions {
  display: flex;
  gap: 10px;
}

.share-actions .btn {
  flex: 1;
  padding: 13px;
  font-size: 0.9rem;
}

.share-wa {
  background: #25d366;
  color: #fff;
}

.share-wa:hover {
  background: #1eb858;
  transform: translateY(-2px);
}

.share-more {
  background: var(--slate-100);
  color: var(--navy-900);
}

.share-more:hover {
  background: var(--slate-200);
}

/* Bouton "Partager" générique */
.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s var(--ease);
}

.btn-share:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Icône de partage dans les tableaux */
.row-share {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--slate-100);
  color: var(--navy-700);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.row-share:hover {
  background: var(--orange);
  color: #fff;
}

/* (Le bouton WhatsApp flottant a été remplacé par le chatbot HubSpot,
   chargé dynamiquement via js/main.js — HubSpot fournit sa propre bulle.) */

/* ==========================================================================
   25. SUPPORT — listes de tickets, fil de discussion, composeur
   ========================================================================== */
.support-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}

.ticket-list {
  display: flex;
  flex-direction: column;
}

.ticket-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 16px;
  border-bottom: 1px solid var(--slate-100);
  transition: background 0.2s var(--ease);
}

.ticket-item:hover { background: var(--slate-50); }
.ticket-item.active { background: #fff7ed; border-left: 3px solid var(--orange); }

.ticket-item .ti-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ticket-item .ti-subj {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-item .ti-meta {
  font-size: 0.78rem;
  color: var(--slate-400);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ticket-item .ti-client { font-weight: 600; color: var(--slate-600); }

/* Fil de discussion */
.thread-panel {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: 72vh;
}

.thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--slate-100);
}

.thread-head h3 { font-size: 1.05rem; }
.thread-head .sub { font-size: 0.82rem; color: var(--slate-400); margin-top: 2px; }

.thread {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--slate-50);
}

.bubble {
  max-width: 80%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  position: relative;
  white-space: pre-wrap;        /* préserve les sauts de ligne (réponses IA multi-lignes) */
  overflow-wrap: anywhere;      /* évite le débordement des URLs / n° de suivi longs */
  box-shadow: 0 1px 2px rgba(10, 26, 51, 0.06);
}

.bubble .meta {
  display: block;
  white-space: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 7px;
  opacity: 0.6;
}

.bubble.client {
  align-self: flex-end;
  background: var(--navy-900);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bubble.agent {
  align-self: flex-start;
  background: #fff;
  color: var(--navy-900);
  border: 1px solid var(--slate-200);
  border-bottom-left-radius: 4px;
}

.bubble.bot {
  align-self: flex-start;
  background: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #dbeafe;
}

.bubble.internal {
  align-self: flex-start;
  background: #fefce8;
  color: #854d0e;
  border: 1px dashed #fde047;
}

.bubble.system {
  align-self: center;
  background: transparent;
  color: var(--slate-400);
  font-size: 0.78rem;
  font-weight: 600;
  font-style: italic;
}

.composer {
  border-top: 1px solid var(--slate-100);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.composer textarea {
  width: 100%;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
  min-height: 60px;
}

.composer textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1);
}

.composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-500);
}

.thread-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--slate-400);
  text-align: center;
  padding: 40px;
}

.seg {
  display: inline-flex;
  gap: 6px;
}
.seg select, .role-select {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--slate-200);
  background: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy-900);
}

@media (max-width: 900px) {
  .support-layout { grid-template-columns: 1fr; }
  .thread-panel { max-height: none; }
}

/* Espace support (desktop) : la conversation remplit l'écran et défile en interne —
   le champ de réponse reste visible sans scroller toute la page (style messagerie). */
@media (min-width: 901px) {
  .page-support .app-main { height: 100vh; }
  .page-support .app-content { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .page-support .page-intro { display: none; }
  .page-support .support-layout { flex: 1; min-height: 0; height: auto; align-items: stretch; }
  .page-support .support-layout > .panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .page-support .ticket-list { flex: 1; overflow-y: auto; }
  .page-support .thread-panel { min-height: 0; max-height: none; }
  /* En-tête + zone de réponse compacts → plus de place pour lire les messages. */
  .page-support .thread-head { padding: 12px 18px; }
  .page-support .composer { padding: 12px 14px; gap: 8px; }
  .page-support .composer textarea { min-height: 42px; }
  .page-support .qr-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
}
/* Écran de portable (la plupart) : on masque les cartes de statistiques pour
   donner toute la hauteur à la conversation. */
@media (min-width: 901px) and (max-height: 1024px) {
  .page-support .stat-cards { display: none; }
}

/* ==========================================================================
   26. WIDGET SUPPORT FLOTTANT (toutes les pages) — remplace HubSpot
   ========================================================================== */
.nsw-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1800;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(255, 107, 0, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nsw-launcher:hover { transform: scale(1.06) translateY(-2px); }
.nsw-launcher svg { width: 28px; height: 28px; transition: transform 0.3s var(--ease); }
.nsw-launcher .nsw-ic-close { display: none; }
body.nsw-open .nsw-launcher .nsw-ic-open { display: none; }
body.nsw-open .nsw-launcher .nsw-ic-close { display: block; }

.nsw-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: none;
  place-items: center;
  border: 2px solid #fff;
}
.nsw-badge.show { display: grid; }

.nsw-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 1799;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(620px, calc(100vh - 130px));
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
body.nsw-open .nsw-panel { opacity: 1; transform: none; pointer-events: auto; }

.nsw-header {
  background: var(--navy-900);
  color: #fff;
  padding: 24px 22px 26px;
  position: relative;
  overflow: hidden;
}
.nsw-header::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  background: rgba(255, 107, 0, 0.25);
  border-radius: 50%;
  filter: blur(60px);
  top: -80px; right: -40px;
}
.nsw-header .nsw-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 0.9rem; opacity: 0.85;
  position: relative;
}
.nsw-header .nsw-brand img { width: 26px; height: 26px; border-radius: 7px; background: #fff; padding: 3px; }
.nsw-header h3 { color: #fff; font-size: 1.35rem; margin-top: 14px; position: relative; }
.nsw-header p { color: rgba(255,255,255,.7); font-size: 0.86rem; margin-top: 4px; position: relative; }

.nsw-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nsw-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 15px 16px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nsw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.nsw-card .nsw-card-ic {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,107,0,.12); color: var(--orange);
}
.nsw-card .nsw-card-tx b { display: block; font-size: 0.92rem; color: var(--navy-900); font-weight: 700; }
.nsw-card .nsw-card-tx span { font-size: 0.8rem; color: var(--slate-500); }
.nsw-card .nsw-arrow { margin-left: auto; color: var(--slate-300); }

.nsw-section-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate-400);
  margin: 6px 4px 0;
}

.nsw-ticket {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 12px; padding: 12px 14px;
  transition: background 0.2s var(--ease);
}
.nsw-ticket:hover { background: var(--slate-50); }
.nsw-ticket .nt-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.nsw-ticket .nt-subj { font-weight: 700; font-size: 0.86rem; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsw-ticket .nt-time { font-size: 0.74rem; color: var(--slate-400); }

.nsw-composer {
  border-top: 1px solid var(--slate-200);
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nsw-composer textarea {
  width: 100%;
  border: 1.5px solid var(--slate-200);
  border-radius: 12px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: none;
  min-height: 46px;
  max-height: 120px;
}
.nsw-composer textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,107,0,.1); }
.nsw-send {
  align-self: flex-end;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: 12px;
  transition: background 0.2s var(--ease);
}
.nsw-send:hover { background: var(--orange-dark); }
.nsw-send:disabled { opacity: 0.6; }

.nsw-ok {
  text-align: center; padding: 24px 16px; color: var(--slate-600);
}
.nsw-ok .nsw-ok-ic {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(34,197,94,.12); color: #16a34a;
}

.nsw-footer {
  text-align: center; font-size: 0.72rem; color: var(--slate-400);
  padding: 8px; background: #fff; border-top: 1px solid var(--slate-100);
}

@media (max-width: 480px) {
  .nsw-panel { right: 8px; left: 8px; bottom: 88px; width: auto; }
  .nsw-launcher { bottom: 18px; right: 18px; }
}

/* Indicateur "en ligne" sur le launcher */
.nsw-online {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e; border: 2.5px solid #fff;
}

/* En-tête : bouton retour + statut */
.nsw-head-row { display: flex; align-items: center; gap: 10px; position: relative; }
.nsw-back {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff;
  transition: background .2s var(--ease);
}
.nsw-back:hover { background: rgba(255,255,255,.22); }
.nsw-head-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.8);
  margin-top: 6px; position: relative;
}
.nsw-head-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }

/* Bouton "nouvelle conversation" */
.nsw-newconv {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px;
  background: var(--orange);
  color: #fff; font-weight: 800; font-size: .95rem; border-radius: 14px;
  box-shadow: 0 8px 20px rgba(255,107,0,.3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nsw-newconv:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,107,0,.4); }
.nsw-newconv svg { width: 18px; height: 18px; }

/* Thread de conversation dans le widget */
.nsw-thread {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-soft);
}
.nsw-msg { max-width: 82%; display: flex; gap: 8px; align-items: flex-end; }
.nsw-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.nsw-msg .av-s {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
}
.nsw-msg.agent .av-s { background: var(--navy-800); }
.nsw-msg.bot .av-s { background: var(--blue); }
.nsw-msg .av-s svg { width: 15px; height: 15px; }
.nsw-msg .b {
  padding: 11px 15px; border-radius: 16px; font-size: .9rem; line-height: 1.55;
  box-shadow: 0 1px 2px rgba(10, 26, 51, .05);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.nsw-msg.me .b { background: var(--navy-900); color: #fff; border-bottom-right-radius: 5px; }
.nsw-msg.agent .b { background: #fff; color: var(--navy-900); border: 1px solid var(--slate-200); border-bottom-left-radius: 5px; }
.nsw-msg.bot .b { background: #eff4ff; color: #1e335f; border: 1px solid #dde6f7; border-bottom-left-radius: 5px; }
.nsw-msg.system { align-self: center; max-width: 92%; margin: 2px 0; }
.nsw-msg.system .b { background: var(--slate-100); color: var(--slate-500); font-size: .76rem; text-align: center; padding: 7px 14px; border-radius: 999px; box-shadow: none; }
.nsw-msg .t { display: block; white-space: normal; font-size: .66rem; opacity: .6; margin-top: 4px; }

/* Indicateur de saisie (points animés) */
.nsw-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.nsw-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--slate-400);
  animation: nswBounce 1.2s infinite;
}
.nsw-typing span:nth-child(2) { animation-delay: .15s; }
.nsw-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes nswBounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* Affichage du mot de passe (œil) */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 48px; }
.pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--slate-400); border-radius: 8px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.pwd-toggle:hover { color: var(--navy-900); background: var(--slate-100); }
.pwd-toggle svg { width: 20px; height: 20px; }
.pwd-toggle .eye-hide { display: none; }
.pwd-toggle.shown .eye-show { display: none; }
.pwd-toggle.shown .eye-hide { display: block; }

/* Liste des conversations (home connecté) */
.nsw-conv {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--slate-200); border-radius: 14px;
  padding: 14px; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nsw-conv:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.nsw-conv .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--slate-100); color: var(--navy-700); display: grid; place-items: center; flex-shrink: 0; }
.nsw-conv .tx { min-width: 0; flex: 1; }
.nsw-conv .tx b { display: block; font-size: .88rem; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsw-conv .tx span { font-size: .76rem; color: var(--slate-400); }

/* ==========================================================================
   27. TÉMOIGNAGES
   ========================================================================== */
.testimonials { grid-template-columns: repeat(3, 1fr); }

.tcard {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tcard .stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; margin-bottom: 14px; }
.tcard .quote { color: var(--slate-700); font-size: 0.98rem; line-height: 1.7; flex: 1; }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.tcard .who .av {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy-900);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.95rem;
}
.tcard .who .nm { font-weight: 800; color: var(--navy-900); font-size: 0.92rem; }
.tcard .who .loc { font-size: 0.8rem; color: var(--slate-500); }

/* ==========================================================================
   28. NOS ENTREPÔTS
   ========================================================================== */
.warehouse-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

.wh-card {
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.wh-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.wh-card .wh-ic {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 1.6rem;
}
.wh-card.air .wh-ic { background: rgba(10,26,51,.06); color: var(--navy-900); }
.wh-card.sea .wh-ic { background: rgba(10,26,51,.06); color: var(--navy-700); }
.wh-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.wh-card .addr { font-size: 0.92rem; color: var(--slate-600); font-weight: 600; }
.wh-card .note { font-size: 0.82rem; color: var(--slate-400); margin-top: 8px; }

.code-callout {
  margin-top: 28px;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.code-callout .badge-num {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 900; flex-shrink: 0;
}
.code-callout h4 { color: #fff; font-size: 1.05rem; }
.code-callout p { color: var(--slate-300); font-size: 0.9rem; margin-top: 2px; }

/* ==========================================================================
   29. FAQ PUBLIQUE (accordéon)
   ========================================================================== */
.faq-wrap { max-width: 820px; margin-inline: auto; }
.faq-cat-label {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); margin: 28px 4px 12px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  font-weight: 700; font-size: 1rem; color: var(--navy-900);
}
.faq-q .chev { transition: transform 0.3s var(--ease); color: var(--slate-400); flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s var(--ease);
  color: var(--slate-600); font-size: 0.95rem; line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 24px 22px; }

@media (max-width: 768px) {
  .testimonials, .warehouse-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   30. IMAGES (photos thématiques)
   ========================================================================== */
/* Photo en tête des cartes services (déborde jusqu'aux bords de la carte) */
.card-media {
  margin: -32px -32px 22px;
  height: 168px;
  overflow: hidden;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
.card:hover .card-media img { transform: scale(1.07); }

/* Section sombre des stats avec photo de conteneurs en fond — voile bleu nuit uni */
.dark-section.has-bg {
  background-image:
    linear-gradient(rgba(10, 26, 51, 0.92), rgba(10, 26, 51, 0.92)),
    url('../assets/img/containers.jpg');
  background-size: cover;
  background-position: center;
}

/* Visuel « Pourquoi nous » en photo */
.split-visual.photo {
  background-image:
    linear-gradient(rgba(10, 26, 51, 0.30), rgba(10, 26, 51, 0.30)),
    url('../assets/img/why.jpg');
  background-size: cover;
  background-position: center;
}
.split-visual.photo .plane { display: none; }

/* Avatars de témoignages en photo */
.tcard .who .av.photo { padding: 0; overflow: hidden; background: var(--slate-200); }
.tcard .who .av.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Visuels de la page services en photos — voile bleu nuit uniforme */
.service-visual { font-size: 0; border: 1px solid var(--slate-200); }
.service-visual.air {
  background-image: linear-gradient(rgba(10, 26, 51, 0.34), rgba(10, 26, 51, 0.34)), url('../assets/img/air.jpg');
  background-size: cover; background-position: center;
}
.service-visual.sea {
  background-image: linear-gradient(rgba(10, 26, 51, 0.34), rgba(10, 26, 51, 0.34)), url('../assets/img/sea.jpg');
  background-size: cover; background-position: center;
}
.service-visual.track {
  background-image: linear-gradient(rgba(10, 26, 51, 0.42), rgba(10, 26, 51, 0.42)), url('../assets/img/warehouse.jpg');
  background-size: cover; background-position: center;
}

/* Photo dans la section « Nos entrepôts » */
.wh-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 28px;
  height: 240px;
  border: 1px solid var(--slate-200);
}
.wh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   31. DASHBOARD CLIENT — KPI + colis vedette + colonne d'actions
   ========================================================================== */
.dash-welcome { margin-bottom: 22px; }
.dash-welcome h2 { font-size: 1.5rem; color: var(--navy-900); }
.dash-welcome p { color: var(--slate-500); font-size: 0.95rem; margin-top: 2px; }

/* Accueil de l'espace client : un bandeau qui dit ce que NavAir fait pour le
   client, et l'invite à agir (déclarer, récupérer son adresse en Chine). */
.dash-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 28px; border-radius: var(--r-xl, 20px); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234, 91, 12, .35) 0%, rgba(234, 91, 12, 0) 55%), linear-gradient(135deg, #0a1a33 0%, #13294b 100%);
  box-shadow: 0 18px 40px -22px rgba(10, 26, 51, .7);
}
.dash-hero h2 { color: #fff; font-size: 1.7rem; margin-top: 6px; }
.dash-hero p { color: rgba(255, 255, 255, .78); max-width: 560px; margin-top: 6px; line-height: 1.55; }
.dash-hero .dh-kick { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fdba74; }
.dash-hero .dh-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.dash-hero .dh-ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.dash-hero .dh-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.dash-hero .dh-next {
  flex: none; display: flex; flex-direction: column; gap: 4px; min-width: 220px; padding: 16px 18px;
  border-radius: var(--r-lg); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.dash-hero .dh-next-l { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.dash-hero .dh-next b { font-size: 1.05rem; }
.dash-hero .dh-next span { font-size: .88rem; color: rgba(255, 255, 255, .82); }
.dash-hero .dh-next .dh-next-cut { margin-top: 6px; font-weight: 800; color: #fdba74; }
@media (max-width: 760px) {
  .dash-hero { flex-direction: column; align-items: stretch; padding: 22px 18px; }
  .dash-hero h2 { font-size: 1.4rem; }
  .dash-hero .dh-actions .btn { flex: 1; justify-content: center; }
}

/* Bande KPI */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.kpi {
  position: relative;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.kpi .kv { font-size: 1.85rem; font-weight: 800; color: var(--navy-900); line-height: 1; }
.kpi .kv small { font-size: 0.85rem; font-weight: 700; color: var(--slate-400); }
.kpi .kl { font-size: 0.8rem; color: var(--slate-500); font-weight: 600; margin-top: 7px; }
.kpi .ki {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(10, 26, 51, 0.05); color: var(--navy-700);
}
.kpi.accent .ki { background: rgba(234, 91, 12, 0.10); color: var(--orange); }
.kpi.accent .kv { color: var(--orange); }

/* Grille principale : contenu + rail */
.dash-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 22px;
  align-items: start;
}
.dash-main { display: flex; flex-direction: column; gap: 22px; }
.dash-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 92px; }

/* Colis vedette */
.feature-ship {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 26px;
}
.fs-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-400); margin-bottom: 12px;
}
.fs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.fs-track { font-size: 1.45rem; font-weight: 800; color: var(--navy-900); letter-spacing: -0.01em; }
.fs-route { font-size: 0.9rem; color: var(--slate-500); margin-top: 3px; }
.fs-meta { display: flex; gap: 28px; margin: 22px 0 26px; flex-wrap: wrap; }
.fs-meta .m .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-400); font-weight: 700; }
.fs-meta .m .v { font-size: 1rem; font-weight: 700; color: var(--navy-900); margin-top: 3px; }
.fs-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* Stepper horizontal */
.hstep { display: flex; align-items: flex-start; }
.hstep .node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 56px; flex: 0 0 auto; text-align: center; }
.hstep .node .dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--slate-300); color: var(--slate-400);
}
.hstep .node .dot svg { width: 15px; height: 15px; }
.hstep .node.done .dot { background: var(--orange); border-color: var(--orange); color: #fff; }
.hstep .node.current .dot { background: var(--navy-900); border-color: var(--navy-900); color: #fff; box-shadow: 0 0 0 4px rgba(10, 26, 51, 0.12); }
.hstep .node .lbl { font-size: 0.7rem; font-weight: 700; color: var(--slate-500); line-height: 1.3; }
.hstep .node.current .lbl, .hstep .node.done .lbl { color: var(--navy-900); }
.hstep .bar { flex: 1; height: 2px; background: var(--slate-200); margin-top: 14px; }
.hstep .bar.done { background: var(--orange); }

/* Rail latéral */
.rail-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg); padding: 20px 22px; }
.rail-card h3 { font-size: 1rem; margin-bottom: 12px; }
.action-row {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 11px 10px; border-radius: var(--r-md);
  transition: background 0.2s var(--ease);
}
.action-row + .action-row { margin-top: 2px; }
.action-row:hover { background: var(--slate-50); }
.action-row .ar-ic {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; background: rgba(10, 26, 51, 0.06); color: var(--navy-900);
}
.action-row.primary .ar-ic { background: var(--orange); color: #fff; }
.action-row .ar-tx b { display: block; font-size: 0.92rem; color: var(--navy-900); font-weight: 700; }
.action-row .ar-tx span { font-size: 0.78rem; color: var(--slate-500); }
.action-row .chev { margin-left: auto; color: var(--slate-300); }

/* Barres de répartition */
.bar-row + .bar-row { margin-top: 16px; }
.bar-row .bh { display: flex; justify-content: space-between; font-size: 0.84rem; font-weight: 600; color: var(--slate-600); margin-bottom: 7px; }
.bar-track { height: 8px; border-radius: 4px; background: var(--slate-100); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s var(--ease); }
.bar-fill.air { background: var(--orange); }
.bar-fill.sea { background: var(--navy-700); }

/* Liste de colis récents (compacte) */
.recent-list .rl-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--slate-100); }
.recent-list .rl-item:last-child { border-bottom: none; }
.rl-thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--slate-200); background: var(--slate-100); flex-shrink: 0; display: grid; place-items: center; color: var(--slate-300); }
.rl-main { min-width: 0; flex: 1; }
.rl-main b { font-size: 0.92rem; color: var(--navy-900); font-weight: 700; }
.rl-main span { display: block; font-size: 0.78rem; color: var(--slate-400); margin-top: 1px; }

@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-side { position: static; }
}
@media (max-width: 760px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hstep .node { width: 44px; }
  .hstep .node .lbl { font-size: 0.62rem; }
}

/* Bannière de profil */
.profile-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--navy-900);
  border-top: 3px solid var(--orange);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  margin-bottom: 22px;
}
.profile-banner .pb-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.5rem; flex-shrink: 0;
}
.profile-banner .pb-name { color: #fff; font-size: 1.25rem; font-weight: 800; }
.profile-banner .pb-email { color: var(--slate-300); font-size: 0.9rem; margin-top: 2px; }

/* ==========================================================================
   32. WIZARD « Nouveau colis » — parcours par étapes
   ========================================================================== */
.wizard { max-width: 860px; }

.wz-steps { display: flex; align-items: flex-start; margin-bottom: 26px; }
.wz-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 110px; flex: 0 0 auto; text-align: center; }
.wz-step .n {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--slate-300); color: var(--slate-400);
  font-weight: 800; font-size: 0.95rem;
  transition: all 0.25s var(--ease);
}
.wz-step .n svg { width: 17px; height: 17px; }
.wz-step.done .n { background: var(--orange); border-color: var(--orange); color: #fff; }
.wz-step.current .n { background: var(--navy-900); border-color: var(--navy-900); color: #fff; box-shadow: 0 0 0 4px rgba(10, 26, 51, 0.12); }
.wz-step .t { font-size: 0.78rem; font-weight: 700; color: var(--slate-500); }
.wz-step.current .t, .wz-step.done .t { color: var(--navy-900); }
.wz-line { flex: 1; height: 2px; background: var(--slate-200); margin-top: 17px; }
.wz-line.done { background: var(--orange); }

.wz-panel { display: none; }
.wz-panel.active { display: block; animation: fadeUp 0.3s var(--ease); }

.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wizard-nav .spacer { flex: 1; }

/* Récapitulatif (dernière étape) */
.recap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.recap .r { display: flex; flex-direction: column; }
.recap .r .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-400); font-weight: 700; }
.recap .r .v { font-size: 0.98rem; font-weight: 700; color: var(--navy-900); margin-top: 2px; }

@media (max-width: 600px) {
  .wz-step { width: auto; flex: 1; }
  .wz-step .t { font-size: 0.66rem; }
  .recap { grid-template-columns: 1fr; }
}

/* ==========================================================================
   33. PAGE ADRESSES — entrepôt + copie par champ
   ========================================================================== */
.addr-page { max-width: 720px; }
.addr-selectors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }

.addr-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg); overflow: hidden; }
.addr-route {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--navy-900); color: #fff; padding: 20px 22px;
}
.addr-route .ar-side .k { font-size: 0.72rem; color: var(--slate-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.addr-route .ar-side .v { font-size: 1.1rem; font-weight: 800; color: #fff; margin-top: 2px; }
.addr-route .ar-side.right { text-align: right; }
.addr-route .ar-mid {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-full); padding: 7px 14px; font-size: 0.82rem; font-weight: 700; color: #fff;
}

.addr-field {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 15px 22px; border-top: 1px solid var(--slate-100);
}
.addr-field .af-tx { min-width: 0; }
.addr-field .af-k { font-size: 0.74rem; color: var(--slate-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.addr-field .af-v { font-size: 1rem; font-weight: 700; color: var(--navy-900); margin-top: 3px; word-break: break-word; line-height: 1.45; }
.addr-field.mark { background: #fff7ed; }
.addr-field.mark .af-v { color: var(--orange-dark); }

.addr-copy {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--slate-200); background: #fff;
  display: grid; place-items: center; color: var(--slate-500);
  transition: all 0.2s var(--ease);
}
.addr-copy:hover { border-color: var(--orange); color: var(--orange); }
.addr-copy.copied { background: #16a34a; color: #fff; border-color: #16a34a; }
.addr-copy svg { width: 18px; height: 18px; }

.addr-note { padding: 14px 22px; border-top: 1px solid var(--slate-100); font-size: 0.88rem; color: var(--slate-500); }
.addr-hint {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(234, 91, 12, 0.07); border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 20px;
  font-size: 0.88rem; color: var(--navy-800);
}
.addr-hint svg { flex-shrink: 0; color: var(--orange); margin-top: 1px; }

@media (max-width: 600px) {
  .addr-selectors { grid-template-columns: 1fr; }
}

/* ==========================================================================
   34. LISTE DE COLIS CLIQUABLE + DÉTAIL
   ========================================================================== */
.colis-list { display: flex; flex-direction: column; gap: 12px; }
.colis-item {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg);
  padding: 14px 16px; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.colis-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--slate-300); }
.colis-item .ci-thumb {
  width: 54px; height: 54px; border-radius: var(--r-md); flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--slate-200);
  background: var(--slate-100); display: grid; place-items: center; color: var(--slate-300);
}
.colis-item .ci-main { flex: 1; min-width: 0; }
.colis-item .ci-track { font-size: 1rem; font-weight: 800; color: var(--navy-900); }
.colis-item .ci-sub { font-size: 0.82rem; color: var(--slate-500); margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.colis-item .ci-sub .dot { color: var(--slate-300); }
.colis-item .ci-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.colis-item .ci-chev { color: var(--slate-300); }
@media (max-width: 560px) {
  .colis-item .ci-right .badge { display: none; }
  /* Sur téléphone, la vignette vide et les écarts serraient le numéro de colis
     au point de le couper en deux lignes. */
  .colis-item { gap: 10px; padding: 12px 12px 12px 14px; }
  .colis-item .ci-thumb { display: none; }
  .colis-item .ci-track { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .colis-item .ci-right { gap: 6px; }
  .colis-item .ci-chev { display: none; }
}

/* Détail colis */
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.detail-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; color: var(--slate-500); margin-bottom: 16px; }
.detail-back:hover { color: var(--orange); }
.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 22px; }
.detail-side { display: flex; flex-direction: column; gap: 22px; }
.detail-photo { width: 100%; border-radius: var(--r-md); border: 1px solid var(--slate-200); display: block; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

/* Avatar sidebar amélioré */
.side-user .avatar, .pb-avatar, .nav-login {  }
.side-user .avatar {
  background: linear-gradient(135deg, var(--orange), #ff8a3d);
  box-shadow: 0 2px 8px rgba(234, 91, 12, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.side-user .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.side-user {
  transition: background 0.2s var(--ease);
  text-decoration: none;
}
a.side-user:hover { background: rgba(255, 255, 255, 0.09); }
.side-user .chev-r { margin-left: auto; color: var(--slate-500); flex-shrink: 0; }

/* Avatars avec photo (sidebar, profil, banner) */
.avatar img, .pb-avatar img, .avatar-lg img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.pb-avatar, .avatar-lg { overflow: hidden; }

/* Encadré informatif sobre (notes contextuelles) */
.info-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px;
  background: rgba(10, 26, 51, 0.04);
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--navy-900);
  border-radius: var(--r-sm);
  font-size: 0.86rem; line-height: 1.5; color: var(--slate-600);
}
.info-note svg { color: var(--navy-900); flex-shrink: 0; margin-top: 1px; }
.info-note.accent { border-left-color: var(--orange); background: rgba(234, 91, 12, 0.05); }
.info-note.accent svg { color: var(--orange); }

/* Lien tabulaire cliquable (N° de suivi admin) */
.tracklink {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 800;
  color: var(--navy-900); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.18s var(--ease);
}
.tracklink:hover { color: var(--orange); }
.tracklink svg { width: 14px; height: 14px; opacity: 0.55; }
.tracklink:hover svg { opacity: 1; }
/* Bouton WhatsApp + cellule statut admin */
.status-cell { display: flex; align-items: center; gap: 8px; }
.wa-btn {
  width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 9px;
  background: #25d366; color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: filter 0.15s var(--ease), transform 0.12s var(--ease);
}
.wa-btn:hover { filter: brightness(1.08); }
.wa-btn:active { transform: scale(0.94); }
.wa-btn svg { width: 19px; height: 19px; }
.wa-btn.lg { width: auto; height: auto; padding: 12px 18px; gap: 9px; display: inline-flex; align-items: center; font-weight: 800; font-size: 0.92rem; border-radius: 11px; font-family: inherit; }

/* Grille d'infos clé/valeur dans une modale */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 4px; }
.kv-grid .k { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-400); }
.kv-grid .v { font-size: 0.92rem; font-weight: 600; color: var(--navy-900); margin-top: 2px; }
@media (max-width: 520px) { .kv-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   39. SCAN ENTREPÔT (QR) + ÉTIQUETTE IMPRIMABLE
   ========================================================================== */
.scan-wrap { max-width: 560px; margin: 0 auto; }
#reader { width: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--slate-200); background: #0b1320; }
#reader video { width: 100% !important; display: block; }
#reader img[alt="Info icon"] { display: none; }
.scan-hint { text-align: center; color: var(--slate-500); font-size: .9rem; margin: 14px 0; }
.scan-manual { display: flex; gap: 10px; margin-top: 14px; }
.scan-manual input { flex: 1; padding: 13px 15px; border-radius: var(--r-md); border: 1.5px solid var(--slate-200); font-weight: 600; }
.scan-card { margin-top: 18px; }
.scan-bigstatus { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.scan-bigstatus select { font-weight: 700; padding: 12px 14px; border-radius: var(--r-md); border: 1.5px solid var(--slate-200); flex: 1; min-width: 160px; background: #fff; }

/* Étiquette */
.label-toolbar { max-width: 440px; margin: 0 auto 18px; display: flex; gap: 10px; justify-content: center; }
.label-sheet {
  max-width: 440px; margin: 0 auto; background: #fff; border: 2px solid var(--navy-900);
  border-radius: 14px; padding: 24px; text-align: center; color: var(--navy-900);
}
.label-sheet .lb-brand { font-weight: 900; font-size: 1.35rem; letter-spacing: .01em; }
.label-sheet .lb-brand b { color: var(--orange); }
.label-sheet .lb-sub { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); font-weight: 800; margin-top: 2px; }
.label-sheet .lb-qr { margin: 18px auto; width: 240px; height: 240px; display: grid; place-items: center; }
.label-sheet .lb-qr img { width: 100%; height: 100%; }
.label-sheet .lb-track { font-size: 1.55rem; font-weight: 900; letter-spacing: .05em; margin-top: 4px; }
.label-sheet .lb-row { font-size: .95rem; margin-top: 8px; color: var(--slate-700); font-weight: 600; }
.label-sheet .lb-foot { margin-top: 16px; font-size: .76rem; color: var(--slate-500); border-top: 1px dashed var(--slate-300); padding-top: 12px; }


/* ==========================================================================
   40. ANALYTIQUE — graphiques en CSS pur
   ========================================================================== */
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-top: 22px; }
@media (max-width: 820px) { .an-grid { grid-template-columns: 1fr; } }
.chart-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; padding: 22px; }
.chart-card h3 { font-size: 1rem; margin-bottom: 18px; }
.bars { display: flex; flex-direction: column; gap: 13px; }
.bar-row { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 12px; font-size: .86rem; }
.bar-row .lbl { font-weight: 700; color: var(--slate-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 12px; background: var(--slate-100); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--orange), #ff8a3d); min-width: 3px; transition: width .7s var(--ease); }
.bar-row .val { font-weight: 800; color: var(--navy-900); min-width: 28px; text-align: right; }
.bars-vert { display: flex; align-items: flex-end; gap: 8px; height: 210px; padding-top: 10px; }
.bars-vert .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars-vert .col .num { font-size: .72rem; font-weight: 800; color: var(--navy-900); }
.bars-vert .col .b { width: 100%; max-width: 44px; background: linear-gradient(180deg, #1b3a66, var(--navy-900)); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .7s var(--ease); }
.bars-vert .col .cap { font-size: .7rem; color: var(--slate-400); font-weight: 700; white-space: nowrap; }
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; position: relative; background: var(--slate-100); }
.donut::after { content: ''; position: absolute; inset: 27px; background: #fff; border-radius: 50%; }
.legend { display: flex; flex-direction: column; gap: 9px; font-size: .86rem; }
.legend .it { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--slate-600); }
.legend .dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.legend .it b { color: var(--navy-900); margin-left: 2px; }
.top-list { display: flex; flex-direction: column; gap: 11px; }
.top-list .it { display: flex; align-items: center; gap: 12px; }
.top-list .rk { width: 27px; height: 27px; border-radius: 8px; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex-shrink: 0; }
.top-list .it:first-child .rk { background: var(--orange); }
.top-list .nm { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-list .ct { font-weight: 800; color: var(--orange); }

/* ==========================================================================
   41. AVIS CLIENTS — étoiles + cartes
   ========================================================================== */
.stars { display: inline-flex; gap: 2px; color: #f59e0b; }
.stars svg { width: 16px; height: 16px; }
.stars.lg svg { width: 22px; height: 22px; }
.stars-input { display: inline-flex; gap: 6px; }
.stars-input button { background: none; border: 0; cursor: pointer; color: var(--slate-300); padding: 0; line-height: 0; transition: color .15s var(--ease), transform .12s var(--ease); }
.stars-input button svg { width: 32px; height: 32px; }
.stars-input button.on { color: #f59e0b; }
.stars-input button:hover { transform: scale(1.12); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.review-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; padding: 22px; }
.review-card .rc-txt { font-size: .95rem; color: var(--slate-700); line-height: 1.6; margin: 10px 0 14px; }
.review-card .rc-who { font-weight: 800; color: var(--navy-900); }
.review-card .rc-date { font-size: .78rem; color: var(--slate-400); margin-top: 2px; }

/* ==========================================================================
   42. CALCULATEUR RENTABILITÉ + BANNIÈRE PROMO
   ========================================================================== */
.rentab-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .rentab-grid { grid-template-columns: 1fr; } }
.rr { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .9rem; }
.rr span { color: rgba(255, 255, 255, .78); }
.rr b { font-weight: 800; }

.promo-bar { position: relative; background: linear-gradient(90deg, var(--orange), #ff8a3d); color: #fff; text-align: center; font-weight: 700; font-size: .9rem; padding: 10px 42px; }
.promo-bar a { color: #fff; text-decoration: underline; }
.promo-bar .promo-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; opacity: .85; }
.promo-bar .promo-x:hover { opacity: 1; }

/* ==========================================================================
   43. CENTRE DE NOTIFICATIONS (cloche)
   ========================================================================== */
.bell { position: relative; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--slate-100); border: 0; display: grid; place-items: center; cursor: pointer; color: var(--navy-900); flex-shrink: 0; }
.bell:hover { background: var(--slate-200); }
.bell svg { width: 20px; height: 20px; }
.bell .badge-dot { position: absolute; top: 5px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .64rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.notif-panel { position: fixed; top: 68px; right: 16px; width: 340px; max-width: calc(100vw - 28px); background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; box-shadow: 0 18px 50px rgba(10, 26, 51, .18); z-index: 1300; overflow: hidden; display: none; }
.notif-panel.open { display: block; animation: fadeUp .2s var(--ease); }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--slate-100); }
.notif-head h4 { font-size: .95rem; }
.notif-head button { background: none; border: 0; color: var(--orange); font-weight: 700; font-size: .78rem; cursor: pointer; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: block; padding: 13px 16px; border-bottom: 1px solid var(--slate-100); cursor: pointer; text-decoration: none; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--slate-50); }
.notif-item.unread { background: rgba(234, 91, 12, .05); }
.notif-item .t { font-weight: 700; font-size: .88rem; color: var(--navy-900); }
.notif-item .b { font-size: .82rem; color: var(--slate-500); margin-top: 2px; }
.notif-item .d { font-size: .72rem; color: var(--slate-400); margin-top: 4px; }
.notif-empty { padding: 30px 16px; text-align: center; color: var(--slate-400); font-size: .88rem; }

/* Séparateur « ou » (pages d'authentification) */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--slate-400); font-size: .82rem; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--slate-200); }

/* ==========================================================================
   35. MODAL / POPUP (NavairUI) + TOAST
   ========================================================================== */
.ui-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(10, 26, 51, 0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.ui-overlay.show { opacity: 1; }
.ui-modal {
  width: 100%; max-width: 420px; background: #fff; border-radius: var(--r-xl);
  padding: 34px 30px 26px; text-align: center; box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(0.97); transition: transform 0.3s var(--ease);
}
.ui-overlay.show .ui-modal { transform: none; }
.ui-modal .ui-ic {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
}
.ui-modal .ui-ic.success { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.ui-modal .ui-ic.info { background: rgba(234, 91, 12, 0.12); color: var(--orange); }
.ui-modal .ui-ic.error { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.ui-modal .ui-ic svg { width: 32px; height: 32px; animation: uiPop 0.4s var(--ease) both; }
@keyframes uiPop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.ui-modal h3 { font-size: 1.3rem; color: var(--navy-900); margin-bottom: 8px; }
.ui-modal p { font-size: 0.95rem; color: var(--slate-500); line-height: 1.6; }
.ui-modal .ui-code {
  display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: var(--r-sm);
  background: var(--slate-50); border: 1px dashed var(--slate-300);
  font-weight: 800; color: var(--navy-900); letter-spacing: 0.02em;
}
.ui-actions { display: flex; gap: 10px; margin-top: 24px; }
.ui-actions .btn { flex: 1; }

.ui-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 3100; background: var(--navy-900); color: #fff;
  padding: 13px 20px; border-radius: var(--r-md); font-weight: 600; font-size: 0.9rem;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  display: flex; align-items: center; gap: 10px; max-width: 90vw;
}
.ui-toast.show { opacity: 1; transform: translateX(-50%); }
.ui-toast .tic { color: #4ade80; display: grid; place-items: center; }

/* ==========================================================================
   36. ANIMATION DU STEPPER (fiche colis / dashboard)
   ========================================================================== */
.hstep.animate .node .dot { animation: dotIn 0.45s var(--ease) both; }
.hstep.animate .node:nth-child(1) .dot { animation-delay: 0.05s; }
.hstep.animate .node:nth-child(3) .dot { animation-delay: 0.20s; }
.hstep.animate .node:nth-child(5) .dot { animation-delay: 0.35s; }
.hstep.animate .node:nth-child(7) .dot { animation-delay: 0.50s; }
.hstep.animate .node:nth-child(9) .dot { animation-delay: 0.65s; }
@keyframes dotIn { 0% { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.hstep.animate .bar { position: relative; }
.hstep.animate .bar.done::after {
  content: ''; position: absolute; inset: 0; background: var(--orange);
  transform-origin: left; animation: barFill 0.5s var(--ease) both;
}
.hstep.animate .bar.done:nth-of-type(2)::after { animation-delay: 0.15s; }
@keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hstep .node.current .dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(10, 26, 51, 0.12); } 50% { box-shadow: 0 0 0 7px rgba(10, 26, 51, 0.06); } }

/* ==========================================================================
   37. UPLOAD MULTI-IMAGES
   ========================================================================== */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin-top: 14px; }
.img-thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--slate-200);
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb .rm {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(10, 26, 51, 0.75); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(2px);
}
.img-thumb .rm:hover { background: #dc2626; }
.img-thumb.cover-tag::before {
  content: 'Principale'; position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--orange); color: #fff; font-size: 0.66rem; font-weight: 700;
  text-align: center; padding: 3px; letter-spacing: 0.03em;
}
.img-add {
  aspect-ratio: 1; border: 2px dashed var(--slate-300); border-radius: var(--r-md);
  display: grid; place-items: center; cursor: pointer; color: var(--slate-400);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.img-add:hover { border-color: var(--orange); color: var(--orange); }

/* ==========================================================================
   38. CARTES ARTICLES — formulaire « Nouveau colis » (photo par article)
   ========================================================================== */
.wz-hint { font-size: 0.92rem; color: var(--slate-600); line-height: 1.55; margin-bottom: 18px; }
.wz-subhint { font-size: 0.82rem; color: var(--slate-400); text-align: center; margin-top: 12px; }

.art-card {
  background: #fff;
  border: 1.5px solid var(--slate-200);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.art-card:focus-within { border-color: rgba(234, 91, 12, 0.45); box-shadow: 0 8px 26px rgba(10, 26, 51, 0.08); }

.art-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, #fbfcfe, #fff);
}
.art-card.collapsed .art-head { background: #fff; }
.art-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.art-num {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: rgba(234, 91, 12, 0.12); color: var(--orange);
  display: grid; place-items: center; font-weight: 800; font-size: 0.85rem;
}
.art-title { font-weight: 800; font-size: 1rem; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-head-r { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.art-icon-btn {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: var(--slate-400); background: none; border: 0; cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.art-icon-btn:hover { background: var(--slate-100); color: var(--navy-900); }
.art-del:hover { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.art-toggle svg { transition: transform 0.25s var(--ease); }
.art-card.collapsed .art-toggle svg { transform: rotate(-90deg); }

.art-body { padding: 2px 16px 18px; display: flex; flex-direction: column; gap: 15px; }
.art-card.collapsed .art-body { display: none; }

.art-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; }
@media (max-width: 560px) { .art-row { grid-template-columns: 1fr; } }

/* mise en page « fiche produit » : photo à gauche, détails à droite */
.art-grid { display: grid; grid-template-columns: 176px 1fr; gap: 18px; align-items: start; }
@media (max-width: 560px) { .art-grid { grid-template-columns: 1fr; } }
.art-photo-col { display: flex; flex-direction: column; gap: 0; }
.art-photo-col .art-photo-add { aspect-ratio: 1; min-height: 0; height: 100%; gap: 6px; }
.art-photo-col .art-photo-preview { aspect-ratio: 1; }
.art-photo-col .art-photo-preview img { width: 100%; height: 100%; max-height: none; }
.a-photo-field.invalid .art-photo-add { border-color: #dc2626; color: #dc2626; background: #fff6f6; }
.a-photo-field.invalid .field-err { display: block; }
.art-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* en-tête : titre + résumé + mini-vignette quand replié */
.art-head-txt { display: flex; flex-direction: column; min-width: 0; }
.art-sum { display: none; font-size: 0.8rem; color: var(--slate-500); font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-sum strong { color: var(--navy-900); }
.art-card.collapsed .art-sum { display: block; }
.art-mini { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; display: none; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 1px 4px rgba(10,26,51,0.18); }
.art-card.collapsed.has-photo .art-mini { display: block; }
.art-card.collapsed.has-photo .art-num { display: none; }

/* champ prix avec suffixe devise */
.input-suffix { position: relative; }
.input-suffix input { padding-right: 62px; }
.input-suffix .suffix {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--slate-400); font-size: 0.85rem; pointer-events: none;
}

/* erreurs inline (style « Champ requis ») */
.field-err { display: none; font-size: 0.78rem; color: #dc2626; font-weight: 700; margin-top: 6px; }
.field.invalid .field-err { display: block; }
.field.invalid label { color: #dc2626; }
.field.invalid input { border-color: #dc2626; background: #fff6f6; }
.field.invalid input:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }

/* photo par article */
.art-photo-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 100%; min-height: 132px; padding: 18px;
  border: 2px dashed var(--slate-300); border-radius: var(--r-md);
  color: var(--slate-400); cursor: pointer; text-align: center;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.art-photo-add:hover { border-color: var(--orange); color: var(--orange); background: rgba(234, 91, 12, 0.03); }
.art-photo-add svg { width: 26px; height: 26px; }
.art-photo-add .t { font-weight: 700; font-size: 0.9rem; }
.art-photo-add .s { font-size: 0.74rem; color: var(--slate-400); }
.art-photo-preview { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--slate-200); }
.art-photo-preview img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.art-photo-preview .rm {
  position: absolute; top: 8px; right: 8px; height: 32px; padding: 0 12px; border-radius: 8px;
  background: rgba(10, 26, 51, 0.78); color: #fff; font-weight: 700; font-size: 0.8rem;
  display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(2px); border: 0; cursor: pointer;
}
.art-photo-preview .rm:hover { background: #dc2626; }
.field.invalid .art-photo-add { border-color: #dc2626; color: #dc2626; background: #fff6f6; }

/* bouton « Ajouter un autre article » */
.btn-add-article {
  width: 100%; padding: 15px; border-radius: var(--r-md);
  border: 1.5px solid rgba(234, 91, 12, 0.5); background: rgba(234, 91, 12, 0.04);
  color: var(--orange); font-weight: 800; font-size: 0.95rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn-add-article:hover { background: rgba(234, 91, 12, 0.09); border-color: var(--orange); }
.btn-add-article svg { width: 18px; height: 18px; }

/* liste d'articles avec vignette (fiche colis détail) */
.art-item { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--slate-100); }
.art-item:first-child { padding-top: 2px; }
.art-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.ai-thumb {
  width: 66px; height: 66px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--slate-200); display: block; background: var(--slate-50);
}
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s var(--ease); }
.ai-thumb:hover img { transform: scale(1.06); }
.ai-noimg { display: grid; place-items: center; color: var(--slate-300); }
.ai-main { min-width: 0; flex: 1; }
.ai-desc { font-weight: 700; color: var(--navy-900); }
.ai-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 0.84rem; color: var(--slate-500); }
.ai-meta strong { color: var(--navy-900); font-weight: 700; }
.ai-meta a { color: var(--orange); font-weight: 700; }

/* ==========================================================================
   44. Pages légales (CGU, confidentialité, mentions) + liens légaux auth
   ========================================================================== */
.legal-content {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 18px;
  padding: 40px 44px;
  box-shadow: 0 14px 40px rgba(10, 26, 51, 0.06);
}
.legal-meta {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--slate-500, #64748b);
  background: #f1f5f9;
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 26px;
}
.legal-meta strong { color: var(--navy-900, #0a1a33); font-weight: 700; }
.legal-content h2 {
  font-size: 1.15rem;
  color: var(--navy-900, #0a1a33);
  margin: 30px 0 10px;
  padding-left: 14px;
  border-left: 4px solid var(--orange, #ea5b0c);
  line-height: 1.35;
}
.legal-content h2:first-of-type { margin-top: 8px; }
.legal-content h3 { font-size: 1rem; color: var(--navy-900, #0a1a33); margin: 20px 0 8px; }
.legal-content p,
.legal-content li {
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--slate-600, #475569);
}
.legal-content ul { margin: 8px 0 8px 4px; padding-left: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--orange, #ea5b0c); font-weight: 600; }
.legal-content strong { color: var(--navy-900, #0a1a33); }
.legal-content hr { border: 0; border-top: 1px solid var(--slate-200, #e2e8f0); margin: 26px 0; }
@media (max-width: 600px) { .legal-content { padding: 26px 20px; border-radius: 14px; } }

/* Liens légaux sous les cartes d'authentification */
.auth-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin: 22px auto 0;
  font-size: 0.8rem;
}
.auth-legal a {
  color: var(--slate-500, #64748b);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.auth-legal a:hover { color: var(--orange, #ea5b0c); }
.auth-legal span { color: var(--slate-300, #cbd5e1); }

/* CTA flottants (installer l'app, activer notifications) : ne pas chevaucher le chat */
#pwaInstall { max-width: calc(50vw - 24px); }
#pwaInstall span, #pwaInstall { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nsw-open #pushBtn, body.nsw-open #pwaInstall { display: none !important; }
@media (max-width: 480px) {
  #pwaInstall { font-size: 0.84rem; padding: 11px 14px; }
}

/* ==========================================================================
   45. Mobile : empêcher le zoom indésirable
   - iOS zoome automatiquement sur un champ dont la police fait < 16px → on force 16px.
   - touch-action: manipulation supprime le zoom au double-tap (le pinch-zoom reste possible).
   ========================================================================== */
html, body { touch-action: manipulation; }
@media (max-width: 768px) {
  input,
  select,
  textarea,
  .role-select,
  .track-input {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   46. Indicateur « en train d'écrire » (threads support : agent + client)
   ========================================================================== */
.typing-ind {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 7px 22px 9px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
  color: var(--slate-400);
  font-size: 0.78rem;
  font-weight: 600;
  font-style: italic;
}
.typing-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
}
.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange-600, #ea5b0c);
  opacity: 0.45;
  animation: nav-typing 1.3s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes nav-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots i { animation: none; }
}

/* ==========================================================================
   47. Support « propre » : non-lus, accusés de lecture, indicateur IA
   ========================================================================== */
/* Compteur de non-lus + sujet en gras sur une demande non lue */
.ticket-item.unread .ti-subj { font-weight: 800; color: var(--navy-900); }
.ti-badges { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ti-unread {
  display: inline-flex; min-width: 19px; height: 19px; padding: 0 6px;
  align-items: center; justify-content: center;
  background: var(--orange-600, #ea5b0c); color: #fff;
  font-size: 0.7rem; font-weight: 800; border-radius: 999px; line-height: 1;
}
/* Puce « IA » (l'assistant gère la demande) */
.ti-ai, .ai-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #1e40af; background: #eff4ff; border: 1px solid #dbe4f7;
  border-radius: 999px; padding: 2px 8px;
}
.ai-chip svg { width: 12px; height: 12px; }

/* Accusé de lecture sous le dernier message envoyé */
.read-receipt {
  font-size: 0.68rem; font-weight: 600; color: var(--slate-400);
  margin-top: -6px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px;
}
.read-receipt.right { align-self: flex-end; }
.read-receipt.left { align-self: flex-start; }
.read-receipt.seen { color: var(--orange-600, #ea5b0c); }
.read-receipt svg { width: 13px; height: 13px; }

/* Barre d'action IA dans l'en-tête d'une demande (agent) */
.ai-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 6px 12px;
  border: 1.5px solid var(--slate-200); background: #fff; color: var(--slate-600);
}
.ai-toggle.on { background: #eff4ff; border-color: #c7d7f5; color: #1e40af; }
.ai-toggle svg { width: 15px; height: 15px; }

/* Pastille de non-lus sur la bulle du widget */
.nsw-launcher .nsw-unread {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px; background: var(--orange-600, #ea5b0c);
  color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25); display: none;
}
.nsw-launcher .nsw-unread.show { display: block; }

/* Réponses rapides (canned) — espace agent */
.qr-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 10px; }
.qr-chip {
  font-size: 0.78rem; font-weight: 700; color: var(--slate-600);
  background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.qr-chip:hover { background: #eff4ff; border-color: #c7d7f5; color: #1e40af; }
.qr-chips .qr-lbl {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--slate-400); align-self: center; margin-right: 2px;
}

/* ==========================================================================
   48. Support : pièces jointes (photo) + note de satisfaction (étoiles)
   ========================================================================== */
.msg-att { display: block; max-width: 220px; max-height: 220px; width: auto; border-radius: 10px; margin-top: 6px; border: 1px solid rgba(10,26,51,.1); cursor: pointer; }
.bubble.client .msg-att { border-color: rgba(255,255,255,.25); }
.nsw-msg .b .msg-att { max-width: 180px; }

.att-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--slate-200); background: #fff; color: var(--slate-500); cursor: pointer; flex-shrink: 0; }
.att-btn:hover { color: var(--navy-900); border-color: var(--slate-300); }
.att-btn svg { width: 18px; height: 18px; }
.att-prev { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--slate-500); padding: 6px 0 0; }
.att-prev img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid var(--slate-200); }
.att-prev button { background: none; border: none; color: #dc2626; cursor: pointer; font-weight: 700; font-size: .95rem; }

.rate-box { background: #fff; border: 1px solid var(--slate-200); border-left: 4px solid var(--orange-600); border-radius: var(--r-md); padding: 14px 16px; margin: 10px 0; }
.rate-box .rb-q { font-size: .88rem; font-weight: 700; color: var(--navy-900); margin-bottom: 8px; }
.rate-stars { display: inline-flex; gap: 4px; }
.rate-stars button { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; color: var(--slate-300); }
.rate-stars button svg { width: 30px; height: 30px; }
.rate-stars button.on { color: #f5a623; }
.rate-box textarea { width: 100%; margin-top: 10px; border: 1.5px solid var(--slate-200); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: .86rem; min-height: 54px; }
.rate-done { font-size: .85rem; font-weight: 700; color: #16a34a; display: flex; align-items: center; gap: 6px; }
.rate-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 800; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 2px 9px; }

/* ==========================================================================
   49. Support : messages vocaux, enregistreur, appels, file de rappels
   ========================================================================== */
.msg-aud { display: block; margin-top: 6px; max-width: 240px; height: 40px; }
.nsw-msg .b .msg-aud { max-width: 178px; }

.bubble a { color: var(--orange-600, #ea5b0c); font-weight: 700; text-decoration: underline; word-break: break-all; }
.bubble.client a { color: #fff; }

.rec-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--slate-200); background: #fff; color: var(--slate-500); cursor: pointer; flex-shrink: 0; }
.rec-btn:hover { color: var(--navy-900); border-color: var(--slate-300); }
.rec-btn.rec { background: #fef2f2; border-color: #fca5a5; color: #dc2626; animation: rec-pulse 1.2s infinite; }
.rec-btn svg { width: 18px; height: 18px; }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .82rem; font-weight: 700; color: #dc2626; }
.rec-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #dc2626; animation: rec-pulse 1.2s infinite; }
.rec-bar .rec-cancel { margin-left: auto; background: none; border: none; color: var(--slate-500); cursor: pointer; font-weight: 700; }

.cb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 8px; }
.cb-row.done { opacity: .55; }
.cb-row .cb-name { font-weight: 800; color: var(--navy-900); }
.cb-row .cb-sub { font-size: .82rem; color: var(--slate-500); }

/* ==========================================================================
   50. Appels WebRTC natifs : overlay vidéo + popup d'appel entrant
   ========================================================================== */
.ncall-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(5,12,24,.92); display: none; align-items: center; justify-content: center; }
.ncall-overlay.show { display: flex; }
.ncall-box { position: relative; width: min(94vw, 720px); height: min(82vh, 540px); border-radius: 18px; overflow: hidden; background: #0a1a33; }
.ncall-remote { width: 100%; height: 100%; object-fit: cover; background: #0a1a33; }
.ncall-local { position: absolute; right: 14px; top: 14px; width: 130px; height: 92px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255,255,255,.5); background: #06101f; }
.ncall-status { position: absolute; left: 0; right: 0; top: 18px; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.ncall-actions { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: 18px; justify-content: center; }
.ncall-btn { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); }
.ncall-btn:hover { filter: brightness(1.1); }
.ncall-btn.ncall-hang { background: #dc2626; }
.ncall-btn.ncall-acc { background: #16a34a; }
.ncall-btn.ncall-mute.off { background: #f59e0b; }

.ncall-incoming { position: fixed; right: 18px; bottom: 18px; z-index: 100001; display: none; }
.ncall-incoming.show { display: block; animation: nci-in .25s ease; }
@keyframes nci-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.nci-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 50px rgba(10,26,51,.28); max-width: 360px; }
.nci-pulse { width: 46px; height: 46px; border-radius: 50%; background: #0a1a33; color: #fff; display: grid; place-items: center; flex-shrink: 0; animation: rec-pulse 1.3s infinite; }
.nci-t { font-weight: 800; color: var(--navy-900); }
.nci-s { font-size: .85rem; color: var(--slate-500); }
.nci-act { display: flex; gap: 8px; margin-left: auto; }
.nci-act .ncall-btn { width: 44px; height: 44px; }

/* Mode audio (appel vocal) : avatar + nom au lieu de la vidéo */
.ncall-audio { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(135deg, #13294d, #0a1a33); color: #fff; }
.ncall-box.audio .ncall-audio { display: flex; }
.ncall-box.audio .ncall-local { display: none; }
.nca-avatar { width: 116px; height: 116px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; color: rgba(255,255,255,.85); }
.nca-name { font-size: 1.35rem; font-weight: 800; }

/* Bouton caméra coupée pendant un appel vidéo */
.ncall-btn.ncall-cam.off { background: #f59e0b; }

/* ==========================================================================
   51. Numéros de suivi copiables (icône + toast) — partout
   ========================================================================== */
.navcopy-btn {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  margin-left: 6px; width: 22px; height: 22px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--slate-200); background: #fff; color: var(--slate-400);
  border-radius: 6px; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.navcopy-btn:hover { color: var(--navy-900); border-color: var(--slate-300); }
.navcopy-btn.done { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
.navcopy-btn svg { display: block; }
.navcopy-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  background: var(--navy-900); color: #fff; font-size: .85rem; font-weight: 700;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 26px rgba(10,26,51,.3);
  z-index: 100002; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw;
}
.navcopy-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   52. BANDEAU « PROCHAINS DÉPARTS » (départs de conteneurs, tout le site)
   ========================================================================== */
#navair-dep-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1250;
  font-family: 'Montserrat', system-ui, sans-serif;
  background: linear-gradient(90deg, #0c1f3c, var(--navy-900));
  color: #fff; box-shadow: 0 2px 10px rgba(10, 26, 51, .22);
}
#navair-dep-bar .ndep-main {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font-family: inherit; text-align: left; padding: 9px 16px;
}
#navair-dep-bar .ndep-ic { color: var(--orange); display: inline-flex; flex: none; }
#navair-dep-bar .ndep-text {
  flex: 1 1 auto; min-width: 0; font-size: .86rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#navair-dep-bar .ndep-text b { color: #ffb787; font-weight: 800; }
#navair-dep-bar .ndep-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 800; opacity: .92; white-space: nowrap;
  background: rgba(255, 255, 255, .12); padding: 5px 11px; border-radius: 999px;
}
#navair-dep-bar.open .ndep-toggle svg { transform: rotate(180deg); }
/* Ruban défilant (marquee) */
#navair-dep-bar .ndep-marquee-wrap {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}
#navair-dep-bar .ndep-marquee { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; animation: ndep-scroll linear infinite; }
#navair-dep-bar .ndep-half { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
#navair-dep-bar .ndep-seg { display: inline-flex; align-items: center; font-size: .86rem; font-weight: 600; }
#navair-dep-bar .ndep-seg b { color: #ffb787; font-weight: 800; }
#navair-dep-bar .ndep-seg svg { color: var(--orange); flex: none; margin-right: 6px; }
#navair-dep-bar .ndep-seg .ndep-badge { margin-left: 10px; }
#navair-dep-bar .ndep-sep { color: var(--orange); opacity: .6; padding: 0 24px; font-size: .62rem; }
@keyframes ndep-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#navair-dep-bar:hover .ndep-marquee, #navair-dep-bar.open .ndep-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #navair-dep-bar .ndep-marquee { animation: none; } }
.ndep-badge {
  flex: none; font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .02em;
}
.ndep-badge.ndep-open { background: #dcfce7; color: #15803d; }
.ndep-badge.ndep-closed { background: #fef3c7; color: #b45309; }
.ndep-badge.ndep-sailing { background: #dbeafe; color: #1d4ed8; }
.ndep-badge.ndep-arrived { background: #e2e8f0; color: #475569; }
#navair-dep-bar .ndep-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; color: var(--navy-900);
  border-top: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 18px 44px rgba(10, 26, 51, .28);
  max-height: min(70vh, 520px); overflow-y: auto;
}
.ndep-list { padding: 6px 0; }
.ndep-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 18px; border-bottom: 1px solid var(--slate-100);
}
.ndep-row:last-child { border-bottom: 0; }
.ndep-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; font-weight: 700; color: var(--navy-900); }
.ndep-row-head svg { color: var(--orange); }
.ndep-row-dates { font-size: .85rem; color: var(--slate-500); font-weight: 600; }
.ndep-row-dates b { color: var(--navy-900); font-weight: 800; }
.ndep-row-note { font-size: .8rem; color: var(--slate-400); font-style: italic; }
@media (max-width: 640px) {
  #navair-dep-bar .ndep-main { gap: 8px; padding: 8px 12px; }
  #navair-dep-bar .ndep-text { font-size: .78rem; }
  #navair-dep-bar .ndep-extra { display: none; }
  #navair-dep-bar .ndep-toggle { padding: 5px 9px; }
  #navair-dep-bar .ndep-toggle .ndep-toggle-lbl { display: none; }
}

/* ==========================================================================
   53. CONTENEUR EN COURS DE CHARGEMENT (espace client — portail)
   ========================================================================== */
.load-box { background: linear-gradient(120deg, #ffffff, #fff7f1); border: 1px solid #ffd9bf; border-radius: 16px; padding: 16px 18px; margin-bottom: 22px; box-shadow: 0 6px 20px rgba(234, 91, 12, .08); }
.load-box-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.load-box-head h3 { margin: 0; font-size: 1.05rem; color: var(--navy-900); }
.load-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; animation: loadpulse 1.8s infinite; }
@keyframes loadpulse { 0% { box-shadow: 0 0 0 0 rgba(234, 91, 12, .5); } 70% { box-shadow: 0 0 0 10px rgba(234, 91, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(234, 91, 12, 0); } }
.lc-legend { margin-left: auto; display: flex; gap: 14px; font-size: .74rem; font-weight: 700; color: var(--slate-500); }
.lc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-k { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lc-k.dep { background: var(--orange); }
.lc-k.cut { border: 2px dashed var(--orange); background: #fff; }

/* Grand calendrier mensuel des départs */
.bc-nav { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.lc-month { font-weight: 800; font-size: .95rem; color: var(--navy-900); min-width: 128px; text-align: center; }
.lc-arrow { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--slate-200); background: #fff; color: var(--navy-900); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lc-arrow:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.lc-arrow:disabled { opacity: .35; cursor: default; }
.bc-today { border: 1px solid var(--slate-200); background: #fff; border-radius: 8px; padding: 6px 11px; font-family: inherit; font-weight: 700; font-size: .76rem; color: var(--navy-900); cursor: pointer; }
.bc-today:hover { border-color: var(--orange); color: var(--orange); }
.bc-dow, .bc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bc-dow span { text-align: center; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); padding: 0 0 6px; }
.bc-grid { background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; gap: 1px; background-color: var(--slate-200); }
.bc-cell { background: #fff; min-height: 76px; padding: 5px 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-cell.we { background: #fbfcfe; }
.bc-cell.out { background: var(--bg-soft); }
.bc-cell.past .bc-num { color: var(--slate-300); }
.bc-num { font-size: .76rem; font-weight: 700; color: var(--slate-500); align-self: flex-end; line-height: 1; padding: 3px 4px; border-radius: 999px; }
.bc-cell.today .bc-num { background: var(--navy-900); color: #fff; }
.bc-cell.has { background: #fffaf6; }
.bc-ev { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; border-radius: 6px; padding: 3px 6px; font-family: inherit; font-size: .72rem; font-weight: 800; line-height: 1.2; cursor: pointer; text-align: left; border: 1.5px solid transparent; transition: transform .1s, box-shadow .1s; }
.bc-ev:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(10, 26, 51, .12); }
.bc-ev.dep { background: var(--orange); color: #fff; border-color: var(--orange); }
.bc-ev.cut { background: #fff; color: var(--orange); border: 1.5px dashed var(--orange); }
.bc-ev.closed, .bc-ev.sail { background: var(--slate-100); color: var(--slate-500); border-color: var(--slate-200); border-style: solid; }
.bc-ev.on { box-shadow: 0 0 0 2px var(--navy-900); }
.bc-ev .bc-ic { display: inline-flex; flex: none; }
.bc-ev .bc-ic svg { width: 13px; height: 13px; }
.bc-ev .pays-flag { flex: none; border-radius: 2px; width: 16px !important; height: auto !important; }
.bc-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-more { border: 0; background: none; padding: 0 4px; font-family: inherit; font-weight: 800; font-size: .68rem; color: var(--navy-900); text-align: left; cursor: pointer; }
.bc-more:hover { color: var(--orange); }

/* Détail d'un départ (sous le calendrier) */
.bc-detail { margin-top: 12px; display: grid; gap: 8px; }
.bc-detail-head { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
.bc-close { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--slate-400); cursor: pointer; }
.bc-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; background: #fff; border: 1px solid var(--slate-200); border-left: 4px solid var(--orange); border-radius: 12px; padding: 12px 14px; }
.bc-card.closed, .bc-card.sail { border-left-color: var(--slate-300); }
.bc-card.hot { border-left-color: #dc2626; }
.bc-card-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--navy-900); font-size: .95rem; }
.bc-card-mode { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--orange); }
.bc-card-mode svg { width: 16px; height: 16px; }
.bc-card-head em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--slate-500); background: var(--slate-100); padding: 1px 8px; border-radius: 999px; }
.bc-state { margin-left: auto; font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #b45309; }
.bc-card.hot .bc-state, .bc-card.closed .bc-state { background: #fee2e2; color: #b91c1c; }
.bc-card.sail .bc-state { background: #e0f2fe; color: #0369a1; }
.bc-card-rows { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .84rem; color: var(--navy-900); font-weight: 700; }
.bc-card-rows b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-400); font-weight: 800; }
.bc-card-note { grid-column: 1 / 2; font-size: .8rem; color: var(--slate-500); }
.bc-cta { grid-row: 2; grid-column: 2; background: var(--orange); color: #fff; font-weight: 800; font-size: .84rem; padding: 9px 16px; border-radius: 9px; text-decoration: none; white-space: nowrap; }
.bc-cta:hover { background: #c94d08; }

@media (max-width: 860px) {
  .lc-legend { margin-left: 0; width: 100%; }
  .bc-nav { margin-left: 0; order: 3; width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .bc-cell { min-height: 54px; padding: 3px 2px; }
  .bc-ev { padding: 2px; justify-content: center; }
  .bc-ev .bc-lbl, .bc-ev .bc-ic { display: none; }
  .bc-more { font-size: .64rem; padding: 0 2px; text-align: center; }
  .bc-more .bc-more-t { display: none; }
  .bc-ev .pays-flag { width: 18px !important; }
  .bc-dow span { font-size: .6rem; }
  .bc-card { grid-template-columns: 1fr; }
  .bc-cta { grid-row: auto; grid-column: 1; text-align: center; }
  .bc-state { margin-left: 0; }
}

/* ==========================================================================
   54. PAGINATION (NavairUtil.makePager)
   ========================================================================== */
.pagin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 14px 4px 2px; }
.pagin .pg-btn, .pagin .pg-num {
  min-width: 34px; height: 34px; padding: 0 6px; border: 1px solid var(--slate-200); background: #fff;
  border-radius: 8px; font-family: inherit; font-weight: 700; font-size: .85rem; color: var(--navy-900);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s;
}
.pagin .pg-btn:hover:not(:disabled), .pagin .pg-num:hover { border-color: var(--slate-300); background: var(--bg-soft); }
.pagin .pg-num.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.pagin .pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pagin .pg-gap { padding: 0 4px; color: var(--slate-400); font-weight: 800; }
.pagin .pg-info { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--slate-500); white-space: nowrap; }
@media (max-width: 560px) { .pagin .pg-info { margin-left: 0; width: 100%; order: 3; } }

/* Choix du type d'envoi aérien (normal / express) — enregistrement colis & calculateur public */
.svc-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc-opt { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1.5px solid var(--slate-200, #e2e8f0); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.svc-opt input { margin-top: 3px; accent-color: var(--orange, #f97316); }
.svc-opt span { display: flex; flex-direction: column; line-height: 1.2; }
.svc-opt strong { font-size: .9rem; font-weight: 700; }
.svc-opt small { font-size: .74rem; color: var(--slate-400, #94a3b8); margin-top: 2px; }
.svc-opt:has(input:checked) { border-color: var(--orange, #f97316); background: #fff7ed; }
@media (max-width: 480px) { .svc-toggle { grid-template-columns: 1fr; } }

/* ===== Tablette / confort tactile (réceptionniste entrepôt) ===== */
@media (pointer: coarse) {
  .btn, .rc-tab, .scan-card button, .scan-card select, .edit-grid input, .edit-grid select,
  select, input[type="text"], input[type="number"], input[type="date"], input[type="file"] { min-height: 44px; }
  .gx-act a, .gx-act button { min-width: 42px; min-height: 42px; }
  .filt-field input, .filt-field select { min-height: 44px; }
}
/* Tablette en paysage : garde la mise en page bureau confortable */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
  .app-content { padding-left: 18px; padding-right: 18px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}


/* ==========================================================================
   Selecteur de pays de residence (js/pays.js) - inscription + profil
   ========================================================================== */
/* Pays de résidence : trois choix visibles d'un coup plutôt qu'une liste déroulante.
   Un <select> ne peut pas afficher de drapeau ; des boutons radio le peuvent, tout
   en restant navigables au clavier et annoncés correctement par un lecteur d'écran. */
.pays-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
.pays-opt { position: relative; display: block; height: 100%; cursor: pointer; }
.pays-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* height:100% + justify-content:center : les trois cartes gardent la même
   hauteur même quand « Côte d'Ivoire » passe sur deux lignes. */
.pays-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; height: 100%; box-sizing: border-box;
  padding: 12px 6px; border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: var(--r-md, 12px); background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pays-opt:hover .pays-card { border-color: var(--slate-300, #cbd5e1); }
.pays-opt input:checked + .pays-card {
  border-color: var(--orange, #ea5b0c); background: #fff7f2;
  box-shadow: inset 0 0 0 1px var(--orange, #ea5b0c);
}
.pays-opt input:focus-visible + .pays-card { outline: 2px solid var(--orange, #ea5b0c); outline-offset: 2px; }
.pays-flag { width: 34px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); display: block; }
/* Les noms de pays sont des noms propres : on annule la casse et l'interlettrage
   hérités du style des <label>, qui les élargissaient inutilement. */
.pays-nom {
  font-size: .82rem; font-weight: 700; text-align: center; line-height: 1.2;
  color: var(--navy, #0a1a33); text-transform: none; letter-spacing: 0;
}
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.champ-note { font-weight: 500; color: var(--slate-400, #94a3b8); }
@media (max-width: 380px) { .champ-duo { grid-template-columns: 1fr; } .pays-nom { font-size: .72rem; } }

/* Rappel du nom enregistré, pour les comptes créés avant la séparation
   prénom/nom : le client répartit lui-même, on ne devine pas à sa place. */
.champ-aide {
  margin: -6px 0 18px;
  padding: 10px 12px;
  border-left: 3px solid var(--orange, #ea5b0c);
  background: #fff7f2;
  border-radius: 0 8px 8px 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--slate-600, #475569);
}

.pays-vide {
  grid-column: 1 / -1; margin: 0; padding: 12px;
  font-size: .85rem; color: var(--slate-500, #64748b); text-align: center;
}


/* ==========================================================================
   Selecteur d'espace (pays) — adresses.html, mes-colis.html
   Ne s'affiche qu'a partir de deux pays : un client mono-pays ne le voit jamais.
   ========================================================================== */
.espace-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px;
}
.espace-lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-500, #64748b);
}
.espace-opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font: inherit;
  font-size: .82rem; font-weight: 700; color: var(--navy, #0a1a33);
  background: #fff; border: 1.5px solid var(--slate-200, #e2e8f0);
}
.espace-opt.actif { border-color: var(--orange, #ea5b0c); background: #fff7f2; }

/* Choix du pays dans la fenetre « Ouvrir un espace » (barre du haut). Une ligne
   par pays, pleine largeur : le drapeau et le nom se lisent d'un coup d'oeil,
   la ou la boite de dialogue du navigateur demandait de taper un numero.
   A ne pas confondre avec .espace-choix, l'ecran du tout premier choix. */
.espace-ouvrir { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.espace-ouvrir-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  padding: 12px 14px; border-radius: var(--r-md, 12px); font: inherit;
  font-size: .92rem; font-weight: 700; color: var(--navy, #0a1a33); text-align: left;
  background: #fff; border: 1.5px solid var(--slate-200, #e2e8f0);
  transition: border-color .15s, background .15s;
}
.espace-ouvrir-opt:hover { border-color: var(--orange, #ea5b0c); background: #fff7f2; }
.espace-ouvrir-opt:focus-visible { outline: 2px solid var(--orange, #ea5b0c); outline-offset: 2px; }
.espace-ouvrir-opt[disabled] { opacity: .55; cursor: default; }
.espace-ouvrir-opt svg { flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); }
.espace-opt:focus-visible { outline: 2px solid var(--orange, #ea5b0c); outline-offset: 2px; }
.espace-n {
  font-size: .7rem; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: var(--slate-100, #f1f5f9); color: var(--slate-500, #64748b);
}
.espace-opt.actif .espace-n { background: #ffe6d5; color: #b8500b; }


/* ==========================================================================
   Rappel de l'espace pays actif (js/app.js)
   Une bande discrete mais permanente : le selecteur en haut indique le choix,
   celle-ci rappelle ses consequences la ou l'utilisateur agit.
   ========================================================================== */
.espace-rappel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  border: 1px solid #fcd9bd;
  border-left: 4px solid var(--orange, #ea5b0c);
  border-radius: var(--r-md, 12px);
  background: #fff8f3;
  color: var(--navy, #0a1a33);
  font-size: .86rem;
  line-height: 1.45;
}
.espace-rappel.neutre {
  border-color: var(--slate-200, #e2e8f0);
  border-left-color: var(--slate-300, #cbd5e1);
  background: var(--slate-50, #f8fafc);
  color: var(--slate-600, #475569);
}
.espace-rappel svg { flex: 0 0 auto; }
.espace-rappel .pays-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); }
.espace-rappel span { flex: 1; }
.espace-rappel-chg {
  flex: 0 0 auto;
  background: #fff;
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy, #0a1a33);
  cursor: pointer;
}
.espace-rappel-chg:hover { border-color: var(--orange, #ea5b0c); color: var(--orange, #ea5b0c); }
@media (max-width: 560px) {
  .espace-rappel { flex-wrap: wrap; }
  .espace-rappel span { flex: 1 1 100%; order: 3; }
}


/* ==========================================================================
   Choix de l'espace pays a la premiere connexion (js/app.js)
   Charte NavAir : bleu nuit, orange, Montserrat. Volontairement bloquant :
   sans espace, aucun ecran ne sait quels tarifs ni quelle adresse afficher.
   ========================================================================== */
.espace-choix {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 16, 31, .72);
  backdrop-filter: blur(3px);
}
.espace-choix .ec-carte {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 30px 26px 26px;
  box-shadow: 0 24px 60px rgba(6, 16, 31, .3);
  text-align: center;
}
.espace-choix .ec-logo img { width: 58px; height: auto; margin-bottom: 14px; }
.espace-choix h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy, #0a1a33);
  margin: 0 0 8px;
  line-height: 1.2;
}
.espace-choix .ec-sous {
  font-size: .87rem;
  color: var(--slate-500, #64748b);
  line-height: 1.5;
  margin: 0 0 22px;
}
.espace-choix .ec-liste { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.espace-choix .ec-opt { position: relative; display: block; cursor: pointer; }
.espace-choix .ec-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.espace-choix .ec-ligne {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.espace-choix .ec-opt:hover .ec-ligne { border-color: var(--slate-300, #cbd5e1); }
.espace-choix .ec-opt input:checked + .ec-ligne {
  border-color: var(--orange, #ea5b0c);
  background: #fff7f2;
  box-shadow: inset 0 0 0 1px var(--orange, #ea5b0c);
}
.espace-choix .ec-opt input:focus-visible + .ec-ligne {
  outline: 2px solid var(--orange, #ea5b0c);
  outline-offset: 2px;
}
.espace-choix .ec-ligne .pays-flag {
  width: 26px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
  flex: 0 0 auto;
}
.espace-choix .ec-nom { flex: 1; font-weight: 700; font-size: .95rem; color: var(--navy, #0a1a33); }
.espace-choix .ec-coche { flex: 0 0 auto; color: var(--orange, #ea5b0c); opacity: 0; }
.espace-choix .ec-opt input:checked + .ec-ligne .ec-coche { opacity: 1; }
.espace-choix .ec-err {
  font-size: .84rem;
  color: #dc2626;
  font-weight: 600;
  margin: 0 0 12px;
}
.espace-choix .ec-ok:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 400px) {
  .espace-choix .ec-carte { padding: 24px 18px 20px; }
  .espace-choix h2 { font-size: 1.22rem; }
}


/* Drapeau + nom de pays, en ligne (NavairPays.badge) */
.pays-badge { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.pays-badge .pays-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); flex: 0 0 auto; }

/* Drapeau accole a une liste deroulante : un <select> ne peut pas afficher
   d'image, on le met donc a cote et on le met a jour au changement. */
.pays-select { display: inline-flex; align-items: center; gap: 8px; }
.pays-select .pays-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); flex: 0 0 auto; }


/* Dimensions par article : trois champs sur une ligne, empiles en dessous de 460px */
.art-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 460px) { .art-row-3 { grid-template-columns: 1fr 1fr; } }


/* ===== IMPRESSION =====
   body porte overflow-x: hidden pour empecher un debordement lateral a
   l'ecran. A l'impression, cela fait du corps un conteneur de defilement :
   le navigateur n'en rend que la premiere hauteur d'ecran, quand il ne sort
   pas une page blanche. Le bouton « Telecharger en PDF » des conditions
   generales renvoyait ainsi un document vide. On relache la contrainte au
   moment d'imprimer, ou aucun debordement lateral n'est possible. */
@media print {
  html, body {
    overflow: visible !important;
    height: auto !important;
  }

  /* Habillage flottant : bandeau des departs de conteneurs, selecteur de
     langue, bulle de support. Utile a l'ecran, sans objet sur un document
     imprime — et le bandeau venait se poser en travers de la premiere page. */
  #navair-dep-bar,
  #navair-dep-spacer,
  #navLangSwitch,
  .nsw-panel,
  .nsw-launcher,
  .demo-banner {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Bascule entre l'administration et son propre espace client.

   Un membre de l'équipe a ses propres colis ; il n'avait aucun lien pour y
   aller. Le bouton est posé par js/app.js dans la barre du haut ET dans la
   barre latérale : la première reste visible sur mobile où la seconde est
   repliée, la seconde est là où l'on cherche un déplacement par habitude.

   Il est volontairement discret — c'est un changement de contexte, pas
   l'action principale de l'écran — mais assez contrasté pour se trouver.
   --------------------------------------------------------------------------- */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--navy-900);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.mode-switch:hover {
  border-color: var(--orange);
  color: var(--orange);
  box-shadow: 0 4px 14px rgba(234, 91, 12, 0.14);
}
.mode-switch:active { transform: translateY(1px); }
.mode-switch:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Sur un écran étroit, le libellé s'effacerait au profit du titre de la page :
   on ne garde que l'icône, et l'intitulé reste accessible par l'attribut
   title et aux lecteurs d'écran par le texte du bouton. */
@media (max-width: 720px) {
  .mode-switch { padding: 9px 11px; gap: 0; }
  .mode-switch span { display: none; }
}

/* Barre du haut à l'étroit : le titre de la page, le bascule d'espace client et
   le sélecteur de pays s'y disputent la place sous 720 px. Le libellé « Espace »
   est décoratif — les options du menu disent déjà de quoi il s'agit — et le
   titre peut céder du terrain avant le reste. */
@media (max-width: 720px) {
  .nav-espace-lbl { display: none; }
  .app-topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
  .app-topbar h1 { min-width: 0; }
  .nav-espace select { max-width: 42vw; }
}
@media (max-width: 420px) {
  .nav-espace select { max-width: 34vw; }
}

/* ---------------------------------------------------------------------------
   Débordements à l'étroit — corrections mesurées, pas décoratives.

   `.panel-head` est une rangée flex « titre à gauche, actions à droite » qui ne
   passait jamais à la ligne : dès que les deux ne tenaient plus, le contenu
   sortait du panneau et `body{overflow-x:hidden}` le coupait. Mesuré à 677 px
   dans 338 sur l'espace support, 412 dans 338 sur la gestion des rôles.
   Autoriser le retour à la ligne ne change rien quand tout tient déjà.
   --------------------------------------------------------------------------- */
.panel-head {
  flex-wrap: wrap;
  gap: 10px 14px;
}
.panel-head > * { min-width: 0; }


/* La barre du haut porte le titre, le bascule vers l'espace client, les actions
   de la page et le sélecteur de pays. Sur une tablette ou un téléphone, tout
   cela ne tient pas sur une ligne, et sa hauteur fixe de 72 px l'empêchait de
   respirer : elle s'allonge désormais au lieu de comprimer son contenu. */
@media (max-width: 860px) {
  .app-topbar {
    height: auto;
    min-height: 72px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* Une barre d'onglets ou de filtres ne se comprime pas : ses libellés doivent
   rester lisibles. Elle défile donc latéralement quand la place manque —
   mesurée à 529 px dans 290 sur l'espace support, où les onglets sortaient du
   panneau et se faisaient couper. Le défilement est la réponse normale : on
   voit qu'il y a une suite, et on l'atteint. */
@media (max-width: 720px) {
  .panel-head .seg {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .panel-head .seg > * { flex: none; }
}

/* Rangées « champ + bouton ». Un enfant de flex vaut par défaut
   min-width:auto : le champ refuse de descendre sous sa largeur intrinsèque,
   et la rangée sort de son panneau. Mesuré à 400 px dans 290 sur le scanner,
   279 dans 266 sur la recherche de suivi de l'accueil. */
.scan-manual,
.track-field { flex-wrap: wrap; }
.scan-manual input,
.track-field input { min-width: 0; }
@media (max-width: 480px) {
  /* Sous cette largeur, les deux côte à côte ne laissent plus rien au champ :
     le bouton prend la ligne suivante, sur toute la largeur. */
  .scan-manual > input,
  .track-field > input { flex: 1 1 100%; }
  .scan-manual > button,
  .scan-manual > .btn,
  .track-field > button,
  .track-field > .btn { flex: 1 1 100%; }
}

/* Le sélecteur de langue est fixé en bas à gauche, avec un z-index de 9998 :
   il passait par-dessus « Déconnexion » sur 35 px de haut, et c'est lui qui
   recevait le clic. La barre latérale lui réserve désormais sa place au lieu
   de la lui disputer. */
.sidebar { padding-bottom: 64px; }

/* ---------------------------------------------------------------------------
   Notice d'information — une consigne qui doit être lue AVANT de saisir.

   Elle était placée sous les champs qu'elle concerne : une mise en garde lue
   après coup ne sert à rien, le client a déjà rempli. L'icône tient sa propre
   colonne pour que le texte reste aligné sur plusieurs lignes, ce qu'un ⓘ
   collé au début du paragraphe ne permet pas.
   --------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a5f;
  font-size: 0.84rem;
  line-height: 1.55;
}
.notice-ic {
  flex: none;
  display: inline-flex;
  color: #2563eb;
  margin-top: 1px;
}
.notice-txt { min-width: 0; }
.notice strong { color: #14304f; font-weight: 800; }

/* ---------------------------------------------------------------------------
   « Je ne connais pas… » : le client declare un colis sans une information que
   son fournisseur ne lui a pas encore donnee. La case gouverne les champs qui
   la suivent, elle doit donc rester lisible comme un choix, pas comme une note.
   La mise en page passe par cette classe et non par un style en ligne : le
   formulaire masque et reaffiche ces blocs avec `style.display = ''`, ce qui
   effacerait un `display:flex` ecrit sur l'element.
   --------------------------------------------------------------------------- */
.opt-inconnu {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.opt-inconnu:hover { border-color: var(--slate-300, #cbd5e1); }
.opt-inconnu:has(input:checked) { border-color: #fcd9bd; background: #fff7f2; }
.opt-inconnu input { flex: none; width: 18px; height: 18px; margin-top: 2px; cursor: pointer; }
.opt-inconnu strong { display: block; color: var(--navy, #0a1a33); font-weight: 700; }
.opt-inconnu small { color: var(--slate-500, #64748b); }

/* ==========================================================================
   Choix du départ à la création d'un colis (register-colis.html)
   ========================================================================== */
.dep-field { margin-top: 16px; }
.dep-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-500); margin-bottom: 4px; }
.dep-hint { font-size: .8rem; color: var(--slate-500); margin: 2px 0 10px; line-height: 1.5; }
.dep-pick { display: grid; gap: 8px; }
.dep-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 44px 10px 10px; border: 1.5px solid var(--slate-200); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.dep-opt:hover { border-color: #fdba8c; }
.dep-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dep-opt.on { border-color: var(--orange); background: #fff7f1; box-shadow: 0 0 0 3px rgba(234, 91, 12, .12); }
.dep-cal { flex: none; width: 46px; border-radius: 9px; overflow: hidden; text-align: center; background: var(--navy-900); color: #fff; line-height: 1.05; padding: 6px 0 5px; }
.dep-cal b { display: block; font-size: 1.15rem; font-weight: 900; }
.dep-cal small { font-size: .62rem; font-weight: 800; text-transform: uppercase; color: #fdba8c; }
.dep-opt.on .dep-cal { background: var(--orange); }
.dep-opt.on .dep-cal small { color: #fff; }
.dep-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dep-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .9rem; color: var(--navy-900); flex-wrap: wrap; }
.dep-title em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--slate-500); background: var(--slate-100); padding: 1px 7px; border-radius: 999px; }
.dep-title .pays-flag { border-radius: 2px; }
.dep-meta { font-size: .76rem; color: var(--slate-500); font-weight: 600; }
.dep-meta b { color: var(--navy-900); }
.dep-badge { flex: none; font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #fef3c7; color: #b45309; white-space: nowrap; }
.dep-opt.hot .dep-badge { background: #fee2e2; color: #b91c1c; }
.dep-check { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid var(--slate-300); }
.dep-opt.on .dep-check { border-color: var(--orange); background: var(--orange); box-shadow: inset 0 0 0 3px #fff; }
.dep-empty { padding: 14px; border: 1.5px dashed var(--slate-300); border-radius: 12px; font-size: .85rem; color: var(--slate-500); background: var(--bg-soft); }
@media (max-width: 520px) { .dep-opt { flex-wrap: wrap; } .dep-badge { margin-left: 58px; } }
.bc-card-head .pays-flag { width: 24px; }
.dep-title .pays-flag { width: 20px; }

/* ==========================================================================
   55. MENU & PIED DE PAGE (pages publiques) — même langage que l'accueil :
   marine + orange de la marque, titres étroits « lettrage de conteneur ».
   ========================================================================== */
.nav .brand span small { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); margin-left: 4px; }
.nav-links { gap: 2px; height: 100%; }
.nav-links > a { position: relative; padding: 10px 14px; border-radius: 0; font-weight: 700; font-size: .9rem; color: var(--navy-900); background: none !important; }
.nav-links > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.nav-links > a:hover { color: var(--navy-900); }
.nav-links > a:hover::after, .nav-links > a.active::after { transform: scaleX(1); }
.nav-links > a.active { color: var(--navy-900); }
.nav-links > a:focus-visible, .nav-cta a:focus-visible, .footer a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.nav-cta { gap: 6px; }
.nav-cta .nav-login { border: 0; background: none; color: var(--navy-900); font-weight: 700; padding: 0 14px; min-height: 44px; box-shadow: none; }
.nav-cta .nav-login::before { content: ""; width: 18px; height: 18px; margin-right: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav-cta .nav-login:hover { color: var(--orange); background: none; }
.nav-cta .btn-primary { border-radius: 6px; font-weight: 800; }

@media (max-width: 768px) {
  /* Le menu s'ouvre SOUS la barre, bandeau des départs compris. */
  .nav-links.open {
    top: calc(var(--nav-h) + var(--navair-dep-h, 0px)); bottom: 0; height: auto;
    background: var(--navy-900); backdrop-filter: none; border: 0; box-shadow: none;
    padding: 18px 20px 28px; gap: 0; overflow-y: auto;
  }
  .nav-links.open > a { color: #fff; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 2rem; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
  .nav-links.open > a::after { display: none; }
  .nav-links.open > a:hover, .nav-links.open > a.active { color: #fdba8c; }
  .nav-links.open .nav-mobile-cta { border-top: 0; margin-top: 22px; padding-top: 0; }
  .nav-links.open .nav-mobile-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); background: none; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Pied de page ---------- */
.footer { background: var(--navy-900); color: #c3cedd; padding-top: 64px; }
.footer .brand { color: #fff; margin-bottom: 10px; }
.footer .brand span small { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8193ab; margin-left: 4px; }
.ft-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 36px; }
.ft-tag { margin: 0; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: .9; color: #fff; max-width: 14ch; }
.ft-wa { display: inline-flex; align-items: center; gap: 14px; background: #25d366; color: #06301a; padding: 14px 20px; border-radius: 6px; font-weight: 800; text-decoration: none; transition: transform .15s, background .15s; }
.ft-wa:hover { background: #1fbe5b; transform: translateY(-1px); }
.ft-wa span { display: flex; flex-direction: column; line-height: 1.2; font-size: 1rem; }
.ft-wa small { font-weight: 600; font-size: .76rem; opacity: .8; }

/* Les deux bouts du trajet : entrepôt en Chine, bureau en Afrique */
.ft-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ft-end { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 34ch; }
.ft-end:last-child { justify-self: end; }
.ft-end span:last-child::first-letter { text-transform: uppercase; }
.ft-end:last-child { text-align: right; }
.ft-k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.ft-end strong { color: #fff; font-size: 1.05rem; }
.ft-end span:last-child { font-size: .88rem; color: #aab7c9; }
.ft-line { height: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 14px, transparent 14px 22px); position: relative; }
.ft-line::before, .ft-line::after { content: ""; position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translateY(-50%); }
.ft-line::before { left: -4px; background: var(--navy-900); border: 3px solid #fff; }
.ft-line::after { right: -4px; background: var(--orange); }

.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 34px 0 40px; }
.footer .footer-col h4 { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: #8193ab; margin-bottom: 12px; }
.footer .footer-col a { color: #e2e8f0; font-weight: 600; font-size: .92rem; padding: 6px 0; overflow-wrap: anywhere; }
.footer .footer-col a:hover { color: #fdba8c; padding-left: 0; }
.footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14); color: #8193ab; }
.ft-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.ft-legal a { color: #aab7c9; }
.ft-legal a:hover { color: #fff; }

@media (max-width: 720px) {
  .ft-top { flex-direction: column; align-items: flex-start; }
  .ft-wa { width: 100%; }
  .ft-route { grid-template-columns: 1fr; gap: 14px; }
  .ft-end:last-child { text-align: left; }
  .ft-line { width: 3px; height: 54px; margin-left: 5px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 8px, transparent 8px 14px); }
  .ft-line::before, .ft-line::after { left: 50% !important; right: auto !important; transform: translateX(-50%); }
  .ft-line::before { top: -6px; }
  .ft-line::after { top: auto; bottom: -6px; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .ft-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nav-links > a::after, .ft-wa { transition: none; } }
/* Icône du menu : trois traits → croix nette */
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 0; transform: none; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
body.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   56. BARRE DE NAVIGATION — logo, nom en lettrage conteneur, bouton « Menu »
   ========================================================================== */
.nav { border-bottom: 2px solid var(--navy-900); }
.nav .brand { gap: 10px; }
.nav .brand-logo { width: 46px; height: 46px; padding: 0; border: 0; background: none; border-radius: 0; }
.nav .brand-logo img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.12); }
.nav .brand > span:last-child { display: inline-block; white-space: nowrap; line-height: 1; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 1.7rem; letter-spacing: .02em; text-transform: uppercase; color: var(--navy-900); }
.nav .brand > span:last-child b { color: var(--orange); }
.nav .brand > span:last-child::after { content: "Distribution"; display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: .52rem; letter-spacing: .32em; color: var(--slate-500); margin-top: 3px; }
.nav .brand > span:last-child > small { display: none; }

@media (max-width: 768px) {
  .nav-toggle { width: auto; height: 42px; padding: 0 14px 0 12px; border-radius: 6px; background: var(--navy-900); display: inline-flex !important; align-items: center; gap: 10px; color: #fff; transition: background .2s; }
  .nav-toggle::before { content: "Menu"; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #fff; width: 18px; }
  body.menu-open .nav-toggle { background: var(--orange); }
  body.menu-open .nav-toggle::before { content: "Fermer"; }
  body.menu-open .nav-toggle span { background: transparent; }
  .nav-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  .nav .brand-logo { width: 40px; height: 40px; }
  .nav .brand > span:last-child { font-size: 1.5rem; }
}
@media (max-width: 768px) { .nav-links.open .nav-mobile-cta .btn-primary { color: #fff; background: var(--orange); } }

/* ==========================================================================
   57. PIED DE PAGE « PAROI DE CONTENEUR » — tôle ondulée, plaques rivetées,
   lettrage au pochoir. Remplace la présentation de la section 55.
   ========================================================================== */
.footer.fx {
  position: relative; overflow: hidden; padding: 64px 0 0; color: #c3cedd;
  background-color: #0a1a33;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 14px, rgba(0, 0, 0, .12) 14px 18px, rgba(255, 255, 255, 0) 18px 32px);
  border-top: 4px solid var(--orange);
}
.fx-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: 36px; padding-bottom: 44px; }
.fx-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.fx-brand img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; }
.fx-brand > span { display: inline-block; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 1.9rem; line-height: 1; letter-spacing: .02em; color: #fff; }
.fx-brand b { color: var(--orange); }
.fx-brand small { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: .56rem; letter-spacing: .32em; text-transform: uppercase; color: #8193ab; margin-top: 4px; }
.fx-tag { margin: 18px 0 20px; font-size: 1rem; color: #c3cedd; font-weight: 600; max-width: 26em; }
.fx-col h4 { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 6px 0 14px; }
.fx-col a { display: block; padding: 6px 0; color: #e2e8f0; font-weight: 600; font-size: .92rem; text-decoration: none; overflow-wrap: anywhere; transition: color .15s; }
.fx-col a:hover { color: #fdba8c; }
.footer.fx a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Plaques d'identification rivetées */
.fx-plates { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; padding: 28px 0 8px; border-top: 1px solid rgba(255, 255, 255, .14); }
.fx-plate { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 22px; border-radius: 4px; background: linear-gradient(180deg, #c9d1db, #a9b4c2); color: #0a1a33; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(0, 0, 0, .35); }
.fx-rivet { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eef2f6, #6b7a8d); }
.fx-rivet:nth-child(1) { top: 7px; left: 7px; } .fx-rivet:nth-child(2) { top: 7px; right: 7px; }
.fx-rivet:nth-child(3) { bottom: 7px; left: 7px; } .fx-rivet:nth-child(4) { bottom: 7px; right: 7px; }
.fx-k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #3d4b5f; }
.fx-plate strong { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.fx-plate > span:last-child { font-size: .84rem; font-weight: 600; color: #2c3b52; }
.fx-plate > span:last-child::first-letter { text-transform: uppercase; }
.fx-arrow { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 2.4rem; color: var(--orange); }

/* Lettrage au pochoir, rogné par le bas comme sur une paroi */
.fx-stencil { font-family: 'Big Shoulders Stencil Display', 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; white-space: nowrap; text-align: center; line-height: .78; font-size: clamp(4rem, 15.5vw, 15rem); letter-spacing: .02em; color: rgba(255, 255, 255, .07); margin: 26px 0 -0.08em; user-select: none; pointer-events: none; }

.fx-bottom { position: relative; background: rgba(0, 0, 0, .28); border-top: 1px solid rgba(255, 255, 255, .1); }
.fx-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; font-size: .84rem; color: #8193ab; }
.fx-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.fx-legal a { color: #aab7c9; text-decoration: none; }
.fx-legal a:hover { color: #fff; }

@media (max-width: 960px) {
  .fx-top { grid-template-columns: 1fr 1fr; }
  .fx-id { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer.fx { padding-top: 46px; }
  .fx-top { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .fx-col:last-child { grid-column: 1 / -1; }
  .fx-id .ft-wa { width: 100%; }
  .fx-plates { grid-template-columns: 1fr; gap: 10px; }
  .fx-arrow { transform: rotate(90deg); justify-self: center; line-height: 1; font-size: 1.8rem; }
  .fx-stencil { font-size: clamp(3rem, 17vw, 6rem); margin-top: 18px; }
}

.fx-col a[href^="mailto:"] { overflow-wrap: normal; word-break: keep-all; font-size: .88rem; }
.side-install:hover { background: rgba(234, 91, 12, 0.14); color: #fed7aa; }

/* Onglets de filtre sur téléphone : une seule ligne qui défile, au lieu de trois
   lignes de boutons empilés avant la liste. */
@media (max-width: 640px) {
  .filters, .qf-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar, .qf-bar::-webkit-scrollbar { display: none; }
  .filters button, .qf-bar .btn { flex: none; white-space: nowrap; }
}