/*
 * nav-mobile.css — Navigation Formateur51
 * #navLinks (panneau mobile) est hors de <nav> → position:fixed viewport-relative
 */

/* ── Desktop : masquer le panneau mobile, utiliser la liste desktop ──── */
.nav-links-mobile {
  display: none !important;    /* caché sur desktop */
}
.nav-links-desktop {
  display: flex !important;    /* visible sur desktop */
}

/* ── Pill Sondage desktop ── */
a.nav-sondage-pill,
a.nav-sondage-pill:link,
a.nav-sondage-pill:visited {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 99px !important;
  background: rgba(33,150,243,.1) !important;
  border: 1.5px solid rgba(33,150,243,.28) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: #1565c0 !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.navbar:not(.scrolled) a.nav-sondage-pill {
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.3) !important;
}
a.nav-sondage-pill:hover { background: rgba(33,150,243,.2) !important; }

/* ── Mobile ≤ 900px ── */
@media (max-width: 900px) {

  /* Inverser : mobile visible, desktop caché */
  .nav-links-desktop { display: none !important; }
  .nav-links-mobile  { display: flex !important; }

  /* ── Panneau mobile fermé ── */
  .nav-links-mobile {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 80px 0 40px !important;
    margin: 0 !important;
    list-style: none !important;
    background: #0d1f3c !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(100%) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: none !important;
    gap: 0 !important;
  }

  /* ── Panneau ouvert ── */
  .nav-links-mobile.open {
    transform: translateX(0) !important;
    box-shadow: -6px 0 40px rgba(0,0,0,.5) !important;
  }

  /* Items */
  .nav-links-mobile > li {
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .nav-links-mobile > li:last-child { border-bottom: none !important; }

  /* Liens */
  .nav-links-mobile .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 18px 28px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background .15s, color .15s !important;
  }
  .nav-links-mobile .nav-link:hover {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
  }
  .nav-links-mobile .nav-link.active {
    color: #60a5fa !important;
    background: rgba(96,165,250,.1) !important;
    font-weight: 700 !important;
    border-left: 3px solid #60a5fa !important;
    padding-left: 25px !important;
  }

  /* Sondage */
  .nav-links-mobile .nav-sondage-pill,
  .nav-links-mobile .nav-sondage-pill:link,
  .nav-links-mobile .nav-sondage-pill:visited {
    display: flex !important;
    margin: 12px 20px !important;
    padding: 13px 20px !important;
    border-radius: 10px !important;
    justify-content: center !important;
    background: rgba(33,150,243,.15) !important;
    border: 1.5px solid rgba(33,150,243,.35) !important;
    color: #90caf9 !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    width: calc(100% - 40px) !important;
  }
  .nav-links-mobile li:has(.nav-sondage-pill) {
    border-bottom: none !important;
  }

  /* Espace personnel mobile */
  .nav-espace-item {
    margin-top: auto !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
  }
  .nav-espace-item .nav-link {
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1.5px solid rgba(255,255,255,.14) !important;
    padding: 13px 20px !important;
  }
  .nav-espace-item .nav-link:hover {
    background: rgba(255,255,255,.13) !important;
  }

  /* Navbar quand menu ouvert */
  .navbar.menu-open {
    background: #0d1f3c !important;
  }
  .navbar:has(+ .nav-links-mobile.open) {
    background: #0d1f3c !important;
  }
  .navbar.menu-open .brand-name     { color: #fff !important; }
  .navbar.menu-open .nav-phone      { color: rgba(255,255,255,.8) !important; }
  .navbar.menu-open .nav-toggle span { background: #fff !important; }

  /* Éléments desktop cachés sur mobile */
  .brand-tagline  { display: none !important; }
  .btn-espace     { display: none !important; }
  .nav-phone span { display: none !important; }
}

/* =====================================================================
   v11 — OVERLAY, MENUS DEROULANTS DESKTOP, LIEN IA
   (gere par nav.js, autonome)
   ===================================================================== */

/* ---- Overlay du menu mobile (cree par nav.js) ---- */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav-overlay.show { opacity: 1; visibility: visible; }

/* ---- Lien "Formation IA" mis en valeur (desktop) ---- */
.nav-links-desktop .nav-link-ia { color: #6d28d9 !important; font-weight: 600 !important; }
.nav-links-desktop .nav-link-ia:hover,
.nav-links-desktop .nav-link-ia.active { color: #6d28d9 !important; background: #f1e9fc !important; }
.nav-links-desktop .nav-link-ia i { color: #7c3aed !important; }

/* =========================================================
   MENUS DEROULANTS DESKTOP (clic — accessible tactile/clavier)
   N'affectent que la liste desktop : le panneau mobile reste a plat.
   ========================================================= */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-drop-toggle {
  background: none; border: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center;
}
.nav-caret { font-size: .62rem; margin-left: 6px; opacity: .65; transition: transform .2s ease; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 210px; margin: 0; padding: 7px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border-light, #e6eef7);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(8,42,90,.18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1001;
}
.nav-dropdown.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-menu li { width: 100%; }
.nav-drop-menu .nav-link { display: block; width: 100%; }


/* =====================================================================
   v13 — Correctifs visuels navigation + menu mobile premium
   ===================================================================== */

.navbar {
  z-index: 9500 !important;
  overflow: visible !important;
}
.nav-wrapper,
.nav-links-desktop,
.nav-dropdown {
  overflow: visible !important;
}

/* Dropdown desktop : plus lisible, toujours au-dessus des héros */
.nav-drop-menu {
  z-index: 9800 !important;
  background: rgba(255,255,255,.98) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(15,98,201,.12) !important;
  box-shadow: 0 18px 42px rgba(9,23,47,.16) !important;
}
.nav-drop-menu .nav-link {
  white-space: nowrap !important;
}

/* Le dernier dropdown ne doit pas sortir de l'écran */
.nav-links-desktop > .nav-dropdown:last-of-type .nav-drop-menu {
  left: auto !important;
  right: 0 !important;
}

/* Hamburger plus propre */
.nav-toggle {
  position: relative !important;
  z-index: 10001 !important;
}
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0 !important;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

@media (max-width: 900px) {
  .nav-overlay {
    background:
      radial-gradient(circle at 80% 20%, rgba(33,150,243,.24), transparent 32%),
      rgba(4,12,28,.58) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
  }

  .nav-links-mobile {
    width: min(88vw, 360px) !important;
    padding: 0 0 22px !important;
    background:
      radial-gradient(circle at top right, rgba(96,165,250,.22), transparent 32%),
      linear-gradient(180deg, #0a1b33 0%, #0d2345 55%, #071629 100%) !important;
    border-left: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: -18px 0 60px rgba(0,0,0,.42) !important;
  }

  .nav-links-mobile.open {
    transform: translateX(0) !important;
  }

  .nav-mobile-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 22px 20px 18px !important;
    margin: 0 0 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(10,27,51,.96), rgba(10,27,51,.82)) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
  }

  .nav-mobile-brand strong {
    display: block !important;
    color: #fff !important;
    font-family: var(--font-display, system-ui, sans-serif) !important;
    font-size: 1.05rem !important;
    letter-spacing: -.02em !important;
  }

  .nav-mobile-brand span {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(255,255,255,.58) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
  }

  .nav-mobile-close {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.08rem !important;
  }

  .nav-mobile-close:hover {
    background: rgba(255,255,255,.14) !important;
  }

  .nav-links-mobile > li:not(.nav-mobile-head) {
    margin: 4px 14px !important;
    width: auto !important;
    border-bottom: 0 !important;
  }

  .nav-links-mobile .nav-link {
    min-height: 48px !important;
    padding: 13px 14px !important;
    border-radius: 15px !important;
    color: rgba(255,255,255,.84) !important;
    font-size: .96rem !important;
    font-weight: 650 !important;
    letter-spacing: -.01em !important;
    border: 1px solid transparent !important;
  }

  .nav-links-mobile .nav-link i {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.08) !important;
    color: #93c5fd !important;
    font-size: .82rem !important;
  }

  .nav-links-mobile .nav-link:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #fff !important;
  }

  .nav-links-mobile .nav-link.active {
    background: linear-gradient(135deg, rgba(33,150,243,.24), rgba(124,58,237,.18)) !important;
    border: 1px solid rgba(147,197,253,.28) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
    border-left: 0 !important;
    padding-left: 14px !important;
  }

  .nav-links-mobile .nav-link.active i {
    background: rgba(96,165,250,.22) !important;
    color: #bfdbfe !important;
  }

  .nav-links-mobile .nav-link-ia {
    background: linear-gradient(135deg, rgba(124,58,237,.24), rgba(33,150,243,.10)) !important;
    border-color: rgba(196,181,253,.18) !important;
  }

  .nav-links-mobile .nav-sondage-pill,
  .nav-links-mobile .nav-sondage-pill:link,
  .nav-links-mobile .nav-sondage-pill:visited {
    width: auto !important;
    margin: 10px 0 !important;
    justify-content: center !important;
    border-radius: 15px !important;
    color: #dbeafe !important;
    background: rgba(33,150,243,.14) !important;
  }

  .nav-espace-item {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  .nav-espace-item .nav-link {
    background: linear-gradient(135deg, #1565C0, #2196F3) !important;
    color: #fff !important;
    justify-content: center !important;
    box-shadow: 0 12px 28px rgba(33,150,243,.25) !important;
  }

  .nav-espace-item .nav-link i {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
  }
}


/* =====================================================================
   v14 — Correctif menu déroulant desktop (texte invisible)
   ---------------------------------------------------------------------
   Sur les pages à héros sombre, .nav-link est blanc pour rester lisible
   sur le fond. Mais le menu déroulant a un fond blanc → texte blanc sur
   blanc = invisible. On force donc une couleur foncée pour les liens
   À L'INTÉRIEUR du menu déroulant, quel que soit l'état de la navbar.
   ===================================================================== */
.nav-drop-menu .nav-link,
.nav-drop-menu .nav-link:link,
.nav-drop-menu .nav-link:visited,
.navbar:not(.scrolled) .nav-drop-menu .nav-link,
.navbar.menu-open .nav-drop-menu .nav-link {
  color: #0d2137 !important;
  font-weight: 600 !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  background: transparent !important;
}
.nav-drop-menu .nav-link:hover {
  background: rgba(33,150,243,.10) !important;
  color: #1565c0 !important;
}
.nav-drop-menu .nav-link.active,
.nav-drop-menu .nav-link[aria-current="page"] {
  background: rgba(33,150,243,.12) !important;
  color: #1565c0 !important;
}
/* Lien Formation IA s'il apparaît un jour dans un menu déroulant */
.nav-drop-menu .nav-link-ia,
.navbar:not(.scrolled) .nav-drop-menu .nav-link-ia {
  color: #6d28d9 !important;
}
.nav-drop-menu .nav-link-ia i { color: #7c3aed !important; }


/* =====================================================================
   v15 — (a) Intertitres de groupe dans le menu mobile (Cours / Découvrir)
          pour refléter exactement l'organisation du menu desktop.
          (b) Sécurité responsive : la navbar étant en position:fixed,
          le héros ne doit jamais être centré verticalement sur mobile
          (sinon le haut du titre passe sous la navbar → page tronquée).
   ===================================================================== */

/* (a) Libellés de section dans le tiroir mobile */
@media (max-width: 900px) {
  .nav-links-mobile .nav-mobile-section {
    list-style: none !important;
    margin: 12px 14px 2px !important;
    padding: 8px 14px 4px !important;
    width: auto !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(147,197,253,.72) !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    background: transparent !important;
  }
  /* Le tout premier intertitre n'a pas besoin de filet au-dessus */
  .nav-links-mobile .nav-mobile-section:first-of-type {
    border-top: 0 !important;
    margin-top: 4px !important;
  }
}

/* (b) Anti-troncature du héros sous la navbar fixe (mobile/tablette) */
@media (max-width: 900px) {
  .home-hero,
  .hero,
  .page-hero,
  .ia-hero {
    min-height: auto !important;
    align-items: flex-start !important;
    padding-top: calc(72px + env(safe-area-inset-top, 0px) + 22px) !important;
  }
}