/* ============================================================================
   marketing-nav.css — Barre de navigation marketing PARTAGÉE (header fixe).
   Pour les pages qui n'inlinent pas leur propre nav (légales, portail, admin).
   Dépend de :
     - themes.css       (variables de thème + styles du bouton thème + responsive)
     - theme-switch.js  (injecte le bouton thème après "Contact")
   Source canonique des règles : identique au header inliné des pages marketing
   (index.html / configurateur.css / service-page.css).
   ========================================================================== */

/* Réserve la gouttière du scrollbar pour que la barre fixed ne se décale pas. */
html { scrollbar-gutter: stable; }

.header {
  position: fixed; top: 0; left: 0;
  width: 100%; padding: 1rem 5%;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(10,10,20,0.85); backdrop-filter: blur(10px);
  z-index: 1000;
}
.logo { display: flex; align-items: center; font-weight: bold; color: var(--text-color, #e0e0e0); text-decoration: none; }
.nav { display: flex; gap: 2rem; align-items: center; }
.nav a { font-weight: 500; color: var(--text-color, #e0e0e0); text-decoration: none; }
.nav a.nav-portal {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-blue), #00d4ff);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.4rem 1.1rem !important;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 114, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav a.nav-portal svg { vertical-align: -2px; margin-right: .3rem; }
.nav a.nav-portal::before { display: none; }
.nav a.nav-portal:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 114, 255, 0.45);
  color: #fff !important;
}

/* CTA Configurateur — bouton plein (dégradé accent), pousse la conversion. */
.nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-blue, #0061cc), var(--light-blue, #00d4ff));
  color: #fff !important;
  border-radius: 999px;
  padding: 0.4rem 1.15rem !important;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 4px 14px var(--accent-glow, rgba(0, 114, 255, 0.28));
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.nav a.nav-cta::before { display: none; }
.nav a.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px var(--accent-glow, rgba(0, 114, 255, 0.45));
  filter: brightness(1.06);
  color: #fff !important;
}

/* Effet de survol pour la navigation (aligné avec les pages marketing) */
.header .logo, .nav a {
  position: relative;
  z-index: 1;
  padding: 0.2rem 0.5rem;
  transition: color 0.3s ease-in-out;
}
.header .logo::before, .nav a::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: var(--primary-blue);
  border-radius: 6px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-in-out;
}
.header .logo:hover::before, .nav a:hover::before,
.nav a.active::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.header .logo:hover, .nav a:hover,
.nav a.active { color: var(--dark-bg); }

.burger { display: none; font-size: 1.8rem; color: white; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; font-family: inherit; }
.burger:focus-visible { outline: 2px solid var(--primary-blue, #00ffff); outline-offset: 3px; border-radius: 4px; }

/* MESURE (2026-08-24) : le menu de bureau ne TIENT qu'a partir de 950 px
   (« Espace client » sortait du cadre de 769 a 949 px, sans que rien ne le
   signale -- l'en-tete est `position: fixed`, donc la page ne defile pas et
   le bouton est simplement coupe). Le seuil du menu deroulant est donc
   celui-la, et le meme partout : une valeur par page redeviendrait fausse
   au premier lien ajoute, en silence. */
@media (max-width: 1080px) {
  .nav { display: none; flex-direction: column; background: var(--container-bg); position: absolute; top: 70px; right: 5%; padding: 1rem; border-radius: 8px; }
  .nav.active { display: flex; }
  .burger { display: block; }
}