/* Barre Groupe DRJ — design unifié (réf. DRJ Cyber) */
:root {
  --drj-eco-line: #e7e4dd;
  --drj-eco-ink: #0f0f1a;
  --drj-eco-ink-3: #52525f;
  --drj-eco-ink-4: #52525f;
  --drj-eco-bg-soft: #fafaf8;
  --drj-eco-accent: #ff5e2e;
  --drj-eco-accent-soft: #fff3ef;
  --drj-eco-max: 1280px;
  --drj-eco-bar-height: 32px;
  --drj-eco-nav-height: 72px;
  --drj-eco-font: Inter, system-ui, sans-serif;
}

.drj-group-bar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--drj-eco-line) !important;
  font-family: var(--drj-eco-font);
  font-size: 11px;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10002 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html:has(.drj-group-bar),
html.has-drj-group-bar {
  scroll-padding-top: calc(var(--drj-eco-bar-height) + var(--drj-eco-nav-height) + 12px);
}

html:has(.drj-group-bar) body,
html.has-drj-group-bar body {
  padding-top: var(--drj-eco-bar-height) !important;
}

.drj-group-inner {
  max-width: var(--drj-eco-max);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--drj-eco-bar-height);
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.drj-group-label {
  color: var(--drj-eco-ink-4);
  font-weight: 500;
  margin-right: 10px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}

.drj-group-label::after {
  content: '·';
  margin-left: 10px;
  color: var(--drj-eco-line);
}

.drj-group-link {
  color: var(--drj-eco-ink-3);
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 11px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.drj-group-link:hover {
  color: var(--drj-eco-ink);
  background: var(--drj-eco-bg-soft);
  border-color: var(--drj-eco-line);
}

.drj-group-link.active {
  color: var(--drj-eco-accent);
  background: var(--drj-eco-accent-soft);
  border-color: rgba(255, 94, 46, 0.22);
  font-weight: 600;
}

/* Décalage des headers fixes / sticky sous la barre */
html:has(.drj-group-bar) body:has(.navbar) .navbar,
body:has(.drj-group-bar) .navbar,
html.has-drj-group-bar body:has(.navbar) .navbar,
body.has-drj-group-bar .navbar {
  top: var(--drj-eco-bar-height) !important;
}

html:has(.drj-group-bar) header.nav,
body:has(.drj-group-bar) header.nav,
html.has-drj-group-bar header.nav,
body.has-drj-group-bar header.nav {
  top: var(--drj-eco-bar-height);
}

html:has(.drj-group-bar) nav,
html:has(.drj-group-bar) nav#mainNav,
html:has(.drj-group-bar) body > nav,
html.has-drj-group-bar nav,
html.has-drj-group-bar nav#mainNav,
html.has-drj-group-bar body > nav {
  top: var(--drj-eco-bar-height) !important;
}

html:has(.drj-group-bar) .mobile-nav,
html.has-drj-group-bar .mobile-nav {
  top: calc(var(--drj-eco-bar-height) + var(--drj-eco-nav-height)) !important;
}

html:has(.drj-group-bar) .page-hero,
html:has(.drj-group-bar) .hero {
  scroll-margin-top: calc(var(--drj-eco-bar-height) + var(--drj-eco-nav-height));
}

/* Logos clients — fond blanc garanti (8UP / DRJ Cloud) */
.trust-bar {
  background: #ffffff !important;
}

.trust-logo {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.trust-logo img {
  filter: none !important;
  opacity: 1 !important;
}