/* ==========================================================================
   Starbit Trading — couche de style commune (lot 4)
   Chargée après les styles de chaque page : elle harmonise typographie,
   couleurs, boutons, en-tête et pied de page sur tout le site.
   ========================================================================== */

:root {
  --sb-blue: #2671B8;          /* bleu du logo */
  --sb-blue-dark: #1d5a94;
  --sb-night: #0F2F52;         /* titres, pied de page */
  --sb-gray: #5f6670;          /* texte secondaire (gris logo, contrasté) */
  --sb-kraft: #CFAE7A;         /* carton d'emballage : petites touches */
  --sb-kraft-soft: #F5EEE2;
  --sb-bg: #F4F7FB;
  --sb-line: #DCE5EF;
  --sb-ink: #1c2530;
  --sb-radius: 14px;
  --sb-font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* anciennes variables des pages, alignées sur la palette */
  --logo-blue: var(--sb-blue);
  --logo-blue-dark: var(--sb-blue-dark);
  --logo-gray: var(--sb-gray);
}

/* ---------- Typographie ---------- */
body {
  font-family: var(--sb-font);
  color: var(--sb-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .nav-menu, .btn, .btn-primary, .blue-btn, .back-button {
  font-family: var(--sb-font);
}
h1, h2 {
  font-stretch: 112%;
  letter-spacing: -0.01em;
}
h3 { font-weight: 700; }
p { line-height: 1.65; }

/* ---------- Focus visible (clavier) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sb-kraft);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Barre du haut ---------- */
.top-bar {
  background: var(--sb-night);
  font-size: 13px;
  padding: 7px 20px;
}
.top-bar a { color: #fff; }
.search-box input { border: 1px solid transparent; }
.search-box button { background: var(--sb-kraft); color: var(--sb-night); }
/* le suivi de colis est accessible par le bouton du menu : pas de doublon ici */
.top-bar .search-box { display: none; }
@media (max-width: 1024px) {
  .top-bar-container { flex-direction: row !important; justify-content: center; }
  .top-bar .contact-info span:nth-child(2) { display: none; }
}

/* ---------- En-tête ---------- */
.navbar {
  transition: box-shadow .2s ease;
  box-shadow: none;
  border-bottom: 1px solid var(--sb-line);
}
.navbar.is-scrolled { box-shadow: 0 6px 20px rgba(15, 47, 82, .08); }
.nav-menu a { color: var(--sb-night); font-weight: 600; }
.nav-menu a:hover { color: var(--sb-blue); }
.nav-menu .nav-track a {
  background: var(--sb-blue);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
}
.nav-menu .nav-track a:hover { background: var(--sb-blue-dark); color: #fff; }

/* ---------- Boutons ---------- */
.btn, .btn-primary, .blue-btn {
  border-radius: 999px;
  font-weight: 700;
  transition: background-color .15s ease, transform .15s ease;
}
.btn-primary, .blue-btn {
  background: var(--sb-blue);
  color: #fff;
}
.btn-primary:hover, .blue-btn:hover { background: var(--sb-blue-dark); color: #fff; }
.btn:active, .btn-primary:active, .blue-btn:active { transform: translateY(1px); }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { background: var(--sb-bg); border-bottom: 1px solid var(--sb-line); }
.breadcrumb a { color: var(--sb-blue); }

/* ---------- Cartes des pages de service ---------- */
.offer-card, .why-item, .service-item, .news-item {
  border: 1px solid var(--sb-line);
  box-shadow: none;
  border-radius: var(--sb-radius);
}
.cta-section { background: var(--sb-night); }
.cta-section h2 { color: #fff; }
.cta-section .btn-primary { background: var(--sb-kraft); color: var(--sb-night); }
.cta-section .btn-primary:hover { background: #e0c497; color: var(--sb-night); }

/* ---------- Pied de page ---------- */
.footer-starbit { background: var(--sb-night); }
.footer-starbit h3 { color: #fff; font-stretch: 112%; }
.footer-starbit a { color: #d6e2ef; }
.footer-starbit a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); color: #b9c8d8; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Icône du menu mobile identique partout */
.hamburger span { background: var(--sb-blue) !important; }