/* ==========================================================================
   ATLAS CONNECT · NAVIGATION GLOBALE · SOURCE UNIQUE
   --------------------------------------------------------------------------
   Ce fichier est la SEULE référence visuelle de la barre de navigation.
   Il se charge APRÈS toutes les CSS de page (service-base.css,
   ia-automatisation.css, styles inline…) et redéfinit chaque propriété du
   header avec la priorité nécessaire (specificité + !important ciblé) afin que
   la nav soit STRICTEMENT identique sur toutes les pages : présentes et futures.

   Pour modifier la nav de tout le site : éditez UNIQUEMENT ce fichier.
   N'ajoutez plus de styles .header / .nav / .logo-img dans les pages.

   Identité : SaaS premium · bleu nuit · accent orange · glassmorphism léger.
   ========================================================================== */

/* ── Variables de la nav (fallbacks si la page ne les définit pas) ───────── */
:root {
  --nav-h: 84px;            /* hauteur header au repos        */
  --nav-h-scrolled: 66px;   /* hauteur header au scroll       */
  --nav-h-mobile: 72px;     /* hauteur header mobile          */
  --nav-logo: 60px;         /* logo au repos                  */
  --nav-logo-scrolled: 48px;/* logo au scroll                 */
  --nav-logo-mobile: 48px;  /* logo mobile                    */
  --nav-bg: rgba(7, 15, 42, .82);
  --nav-bg-scrolled: rgba(7, 15, 42, .94);
  --nav-border: rgba(120, 160, 255, .12);
  --nav-accent: var(--orange, #f97316);
  --nav-accent-d: var(--orange-d, #ea670c);
}

/* ── Conteneur principal · barre fine, sticky, glassmorphism ────────────── */
.header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000 !important;
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--nav-border) !important;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.header-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  height: var(--nav-h) !important;
  position: relative;
  z-index: 2;
  transition: height .32s cubic-bezier(.4, 0, .2, 1);
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.header .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: none !important;
  text-decoration: none;
}
.header .logo-img {
  height: var(--nav-logo) !important;
  width: auto !important;
  display: block !important;
  filter: brightness(1.12) drop-shadow(0 2px 10px rgba(37, 99, 235, .28));
  transition: height .32s cubic-bezier(.4, 0, .2, 1), filter .3s ease;
}

/* ── Liens de navigation (desktop) ──────────────────────────────────────── */
.header .nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header .nav > a:not(.nav-cta),
.header .nav .nav-dd > .nav-dd-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: .885rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, .74) !important;
  text-decoration: none;
  white-space: nowrap;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .2s ease, background .2s ease;
}
.header .nav > a:not(.nav-cta):hover,
.header .nav .nav-dd-trigger:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}

/* ── État actif · soulignement orange discret & premium ─────────────────── */
.header .nav a.active,
.header .nav .nav-dd-trigger.active {
  color: #fff !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: none !important;
}
.header .nav a.active::after,
.header .nav .nav-dd-trigger.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--nav-accent);
  box-shadow: 0 0 10px -1px var(--nav-accent);
}

/* ── Bouton principal · Demander un devis ───────────────────────────────── */
.header .nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  padding: 10px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  color: #fff !important;
  background: var(--nav-accent) !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, .35) !important;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.header .nav-cta:hover {
  background: var(--nav-accent-d) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 22px rgba(249, 115, 22, .5) !important;
}

/* ── Toggle thème + portail · taille homogène ───────────────────────────── */
.header .atlas-theme-toggle { margin: 0 2px !important; }

/* ── Focus accessible ───────────────────────────────────────────────────── */
.header :is(.nav a, .nav-cta, .portal-btn, .atlas-theme-toggle, .hamburger):focus-visible {
  outline: 2px solid var(--blue-l, #60a5fa);
  outline-offset: 2px;
}

/* ── Réduction au scroll (identique partout) ────────────────────────────── */
.header.scrolled {
  background: var(--nav-bg-scrolled) !important;
  box-shadow: 0 10px 34px -16px rgba(2, 6, 28, .7);
  border-bottom-color: rgba(120, 160, 255, .2) !important;
}
.header.scrolled .header-inner { height: var(--nav-h-scrolled) !important; }
.header.scrolled .logo-img     { height: var(--nav-logo-scrolled) !important; }
@media (prefers-reduced-motion: reduce) {
  .header-inner, .header .logo-img { transition: none !important; }
}

/* ==========================================================================
   MENU « SERVICES » DÉROULANT (desktop)
   ========================================================================== */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-dd-caret {
  width: 12px; height: 12px; flex: none;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  opacity: .7;
}
.nav-dd-caret path { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav-dd:hover .nav-dd-caret,
.nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); opacity: 1; }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.98);
  transform-origin: top center;
  width: 520px; max-width: calc(100vw - 32px);
  padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: linear-gradient(160deg, rgba(16, 30, 68, .96), rgba(8, 16, 44, .98));
  border: 1px solid rgba(120, 160, 255, .22);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 34px 80px -28px rgba(2, 6, 28, .88), 0 0 56px -22px rgba(37, 99, 235, .5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s ease, transform .28s cubic-bezier(.22, .68, 0, 1), visibility .26s;
  z-index: 1010;
}
.nav-dd-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-dd-col-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fdba74;
  padding: 4px 10px 8px; margin: 0;
}
.nav-dd-col { min-width: 0; }
.nav-dd-item {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 9px 10px; border-radius: 11px;
  font-size: .85rem; font-weight: 500;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-dd-item span {
  min-width: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-dd-item svg {
  width: 17px; height: 17px; flex: none;
  stroke: #60a5fa; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  opacity: .9; transition: stroke .18s ease;
}
.nav-dd-item:hover { background: rgba(96, 165, 250, .13); color: #fff; transform: translateX(2px); }
.nav-dd-item:hover svg { stroke: #fdba74; }
.nav-dd-item.active { background: rgba(96, 165, 250, .16); color: #fff; }
.nav-dd-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 2px; padding: 11px 12px 4px;
  border-top: 1px solid rgba(96, 165, 250, .16);
}
.nav-dd-foot span { font-size: .76rem; color: rgba(255, 255, 255, .6); }
.nav-dd-foot a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none;
  padding: 7px 14px; border-radius: 50px;
  background: var(--nav-accent);
  box-shadow: 0 4px 14px rgba(249, 115, 22, .35);
  transition: transform .15s ease, background .2s ease;
}
.nav-dd-foot a:hover { transform: translateY(-1px); background: var(--nav-accent-d); }

/* ==========================================================================
   MOBILE · hamburger + panneau déroulant
   ========================================================================== */
.header .hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 9px;
  background: none !important;
  border: 0 !important;
  border-radius: 9px;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.header .hamburger:hover { background: rgba(255, 255, 255, .08) !important; }
.header .hamburger span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.header .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.header .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--nav-bg-scrolled) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 0 18px;
  border-top: 1px solid transparent;
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease,
              transform .4s cubic-bezier(.4, 0, .2, 1), padding .4s cubic-bezier(.4, 0, .2, 1),
              border-color .3s ease;
}
.mobile-nav.open {
  max-height: calc(100vh - var(--nav-h-mobile));
  max-height: calc(100dvh - var(--nav-h-mobile));
  overscroll-behavior: contain;
  opacity: 1; pointer-events: auto; transform: none;
  padding: 14px 18px 22px;
  border-top-color: rgba(120, 160, 255, .14);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: reduce) { .mobile-nav, .header .hamburger span { transition: none; } }
.mobile-nav a {
  padding: 13px 16px !important;
  border-radius: 11px;
  font-size: .95rem !important; font-weight: 500;
  color: rgba(255, 255, 255, .78) !important;
  text-decoration: none;
  background: transparent;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}
.mobile-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff !important; }
.mobile-nav > a.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: inset 3px 0 0 var(--nav-accent) !important;
}
.mobile-nav .mn-cta {
  margin-top: 10px;
  background: var(--nav-accent) !important;
  color: #fff !important;
  border-radius: 999px;
  text-align: center; justify-content: center;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(249, 115, 22, .35) !important;
}
.mobile-nav .mn-cta::after { display: none !important; }

/* ── Sous-liste « Services » dans le menu mobile ────────────────────────── */
.mn-sub {
  display: grid; gap: 2px;
  margin: 2px 0 6px 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(120, 160, 255, .22);
}
.mn-sub a {
  font-size: .88rem !important;
  color: rgba(255, 255, 255, .66) !important;
  padding: 10px 14px !important;
}
.mn-sub a:hover { color: #fff !important; }
.mn-sub a.active { color: #fff !important; background: rgba(96, 165, 250, .14) !important; box-shadow: none !important; }

/* ==========================================================================
   BREAKPOINT UNIFIÉ
   La nav desktop complète n'apparaît que si elle tient entièrement (≥1100px).
   En dessous → hamburger. Évite tout CTA coupé / overflow horizontal.
   ========================================================================== */
@media (min-width: 1100px) {
  .header .nav { display: flex !important; }
  .header .hamburger { display: none !important; }
  .nav-dd-menu { display: grid; }
  .mobile-nav { display: none !important; }
}
@media (max-width: 1099px) {
  .header .nav { display: none !important; }
  .header .hamburger { display: flex !important; }
  .nav-dd-menu { display: none !important; }
}

/* ── Ajustements tablette / mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
  .header-inner { padding: 0 20px !important; height: var(--nav-h-mobile) !important; }
  .header .logo-img { height: var(--nav-logo-mobile) !important; }
  .header.scrolled .header-inner { height: 60px !important; }
  .header.scrolled .logo-img     { height: 42px !important; }
}