/* Nav partagée — lien « Mon cockpit ».
   Chip VIOLET avec point lumineux (UX22) : le violet est la couleur « votre
   espace » dans tout le produit (eyebrow « Mon cockpit », accents modules du
   cockpit) — le rouge reste réservé au risque et à l'erreur. Distinct du menu
   standard (gris) et du CTA principal (cyan). Centralisé ici pour une barre de
   navigation uniforme sur toutes les pages marketing.
   Fallbacks intégrés : reste correct même si une page ne définit pas --violet /
   --font-mono. Sélecteur nav a.nav-mycockpit : spécificité (0,1,2) — prime sur
   les règles « .nav-links a » (0,1,1) des pages, sans !important. */
nav a.nav-mycockpit {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--violet, #b99ce6);
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
  padding: 5px 13px 5px 11px;
  border: 1px solid rgba(185,156,230,.45);
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(185,156,230,.14), rgba(185,156,230,.035));
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
nav a.nav-mycockpit::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet, #b99ce6); box-shadow: 0 0 8px rgba(185,156,230,.85);
  flex: none;
}
nav a.nav-mycockpit:hover {
  color: #f2ecfb;
  background: linear-gradient(135deg, rgba(185,156,230,.30), rgba(185,156,230,.10));
  border-color: var(--violet, #b99ce6);
  box-shadow: 0 6px 20px rgba(185,156,230,.22);
  transform: translateY(-1px);
}

/* ── Menu mobile (hamburger) ───────────────────────────────────────────────
   Le bouton .nav-hamburger est injecté par /assets/nav.js dans chaque <nav>
   qui contient un .nav-links. Caché en desktop ; sous 900px il déroule la liste
   en panneau ancré sous la barre. !important pour neutraliser les règles inline
   hétérogènes des pages (display:none à 860/880/900px selon la page). */
.nav-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 36px; padding: 0; flex: none;
  cursor: pointer; color: var(--txt, #e8eef5);
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,.16));
  border-radius: 9px;
  margin-left: 12px;
}
.nav-hamburger .bars,
.nav-hamburger .bars::before,
.nav-hamburger .bars::after {
  content: ''; display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s ease, opacity .2s ease;
}
.nav-hamburger .bars { position: relative; }
.nav-hamburger .bars::before { position: absolute; left: 0; top: -6px; }
.nav-hamburger .bars::after  { position: absolute; left: 0; top:  6px; }
.nav-hamburger[aria-expanded="true"] .bars { background: transparent; }
.nav-hamburger[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Le wordmark et le CTA ne doivent jamais casser sur deux lignes, quelle que
   soit la page (le ::after « point » de certaines pages wrappait à 390px). */
nav .nav-brand { white-space: nowrap; }
nav .nav-cta   { white-space: nowrap; }

@media (max-width: 900px) {
  /* Contexte de positionnement pour le panneau. Sur les navs déjà en
     position:fixed, la règle inline (postérieure) l'emporte → fixed conservé ;
     sur les navs statiques, ceci s'applique → l'ancrage du panneau est correct. */
  nav { position: relative; }

  .nav-hamburger { display: inline-flex !important; }
  /* Regroupe le CTA (s'il existe) et le hamburger à droite de la barre. */
  nav .nav-cta { margin-left: auto; }

  /* Panneau pleine largeur sous la barre : opaque, sans contenu de page
     visible autour — plus lisible qu'un îlot étroit flottant sur le hero. */
  nav .nav-links {
    position: absolute; top: 100%; right: 12px; left: 12px;
    display: none !important;
    flex-direction: column; align-items: stretch; gap: 2px;
    min-width: 0; margin-top: 10px; padding: 12px;
    background: rgba(8, 10, 18, .99);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  }
  nav .nav-links.open { display: flex !important; }
  nav .nav-links li { list-style: none; width: 100%; margin: 0; }
  nav .nav-links a { display: block; width: 100%; padding: 10px 10px; }
  nav .nav-links .nav-mycockpit { width: max-content; }
}

/* Très petits écrans : la barre garde tout sur une seule ligne (brand
   compacté, CTA resserré) au lieu de casser le logo ou le bouton. */
@media (max-width: 520px) {
  nav { padding-left: 14px !important; padding-right: 14px !important; }
  nav .nav-brand { font-size: 15px; letter-spacing: .14em; }
  nav .nav-cta { font-size: 10px; padding: 7px 10px; letter-spacing: .05em; }
  .nav-hamburger { margin-left: 8px; width: 36px; height: 34px; }
}