/* ═══════════════════════════════════════════════
   OXLUM GROUP — oxlum-fix.css FINAL PROPRE
   Objectif :
   - Corriger définitivement la navbar trop grande
   - Corriger logo / langue / connexion / inscription
   - Corriger login/signup masqués par la barre
   - Garder services, FAQ, démo boutique visibles
   ═══════════════════════════════════════════════ */

/* =========================================================
   0. Base générale
   ========================================================= */

html,
body {
  overflow-x: hidden !important;
}

/* =========================================================
   1. NAVBAR FINALE — compacte et stable
   ========================================================= */

.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 !important;
  z-index: 999999 !important;
  background: rgba(5, 13, 26, 0.98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  overflow: visible !important;
}

.nav-container {
  width: 100% !important;
  max-width: 1440px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  overflow: visible !important;
}

/* =========================================================
   2. Logo navbar
   ========================================================= */

.nav-logo,
.navbar .nav-logo {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-logo img,
.navbar .nav-logo img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

/* =========================================================
   3. Menu desktop compact
   On garde les liens importants dans la barre :
   Accueil / Écosystème / Services / Contact
   Les autres restent accessibles via footer ou pages internes.
   ========================================================= */

.nav-menu {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  overflow: hidden !important;
}

.nav-menu a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* On cache les liens qui rendent la barre trop longue */
.nav-menu a[href="news.html"],
.nav-menu a[href="vision.html"],
.nav-menu a[href="investors.html"],
.nav-menu a[href="careers.html"],
.nav-menu a[href="help.html"],
.nav-menu a[href="status.html"],
.nav-menu a[href="support.html"],
.nav-menu a[href="faq.html"],
.nav-menu a[href="security.html"] {
  display: none !important;
}

/* =========================================================
   4. Zone droite : langue / connexion / inscription
   ========================================================= */

.nav-actions {
  flex: 0 0 auto !important;
  min-width: fit-content !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  z-index: 999999 !important;
}

/* Bouton langue compact : FR / EN / AR */
#langToggle,
.lang-btn,
#languageSelector {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  line-height: 36px !important;
  text-align: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Si l'ancien language.js crée encore un select, on l'empêche d'élargir la navbar */
#languageSelector {
  appearance: none !important;
  -webkit-appearance: none !important;
  text-align-last: center !important;
}

/* Connexion */
.btn-login,
.nav-actions .btn-login {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  line-height: 36px !important;
  white-space: nowrap !important;
}

/* S'inscrire */
.nav-actions .btn-primary {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 38px !important;
  white-space: nowrap !important;
  min-width: auto !important;
}

/* =========================================================
   5. Responsive navbar
   ========================================================= */

/* Écran moyen : on garde Accueil / Écosystème / Services / Contact */
@media (max-width: 1180px) {
  .nav-menu {
    gap: 14px !important;
  }

  .nav-menu a {
    font-size: 0.84rem !important;
  }

  .btn-login {
    display: none !important;
  }
}

/* Si l'écran est trop petit, passage au burger */
@media (max-width: 980px) {
  .nav-menu,
  .nav-actions {
    display: none !important;
  }

  .burger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 999999 !important;
  }

  .nav-container {
    padding: 0 16px !important;
  }
}

/* =========================================================
   6. Menu mobile
   ========================================================= */

.mobile-menu {
  top: 64px !important;
  z-index: 999998 !important;
  background: rgba(5, 13, 26, 0.98) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.mobile-menu.open,
.mobile-menu.active,
.mobile-menu.ox-open {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   7. Corriger les pages Connexion / Inscription masquées
   ========================================================= */

.auth-page,
.auth-main,
.auth-section,
.login-page,
.signup-page,
.forgot-page,
.social-login-page,
.social-signup-page {
  padding-top: 135px !important;
}

.auth-container,
.auth-wrapper,
.auth-shell,
.social-login-shell,
.social-signup-shell {
  margin-top: 20px !important;
}

/* Logos dans login/signup/forgot */
.auth-logo img,
.auth-card-header img,
.auth-topbar-brand img,
.auth-brand img,
.login-brand img,
.signup-brand img,
.social-login-card img,
.social-signup-card img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
}

/* Empêcher les blocs de passer derrière la navbar */
main {
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   8. Logo hero / footer limité
   ========================================================= */

.hero-card img {
  width: auto !important;
  max-width: 190px !important;
  max-height: 190px !important;
  object-fit: contain !important;
}

.footer-brand img {
  width: auto !important;
  max-width: 125px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =========================================================
   9. Services : cacher anciennes cartes vides
   ========================================================= */

.service-card:empty,
.service-detail:empty,
.process-card:empty,
.platform-card:empty,
.security-card:empty {
  display: none !important;
}

.service-card:not(:has(h3)):not(:has(p)),
.service-detail:not(:has(h3)):not(:has(p)),
.process-card:not(:has(h3)):not(:has(p)) {
  display: none !important;
}

/* Garder les vrais services professionnels visibles */
#services-professionnels,
.ox-services-zone,
.ox-services-grid,
.ox-service-card {
  visibility: visible !important;
  opacity: 1 !important;
}

.ox-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.ox-service-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 250px !important;
  color: #ffffff !important;
}

.ox-service-card *,
.ox-demo-zone *,
.ox-demo-card * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   10. Conakry Tech Store visible
   ========================================================= */

#demo-conakry-tech-store,
.ox-demo-zone,
.ox-demo-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ox-demo-card {
  display: grid !important;
}

/* =========================================================
   11. FAQ propre
   ========================================================= */

.faq-preview {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.faq-list {
  width: min(900px, 92%) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 14px !important;
}

.faq-list details {
  display: block !important;
  min-height: auto !important;
  padding: 20px 24px !important;
  border-radius: 18px !important;
  background: rgba(14, 29, 53, 0.82) !important;
  border: 1px solid rgba(21, 101, 255, 0.18) !important;
}

.faq-list summary {
  cursor: pointer !important;
  font-weight: 800 !important;
  color: #e8edf5 !important;
}

.faq-list p {
  color: #7a8ba8 !important;
  margin-top: 12px !important;
}

/* =========================================================
   12. Images dans les cartes
   ========================================================= */

.platform-card img,
.security-card img,
.service-card img,
.ox-service-card img,
.service-detail img {
  max-width: 70px !important;
  max-height: 70px !important;
  object-fit: contain !important;
}

/* =========================================================
   13. Responsive services / démo / FAQ
   ========================================================= */

@media (max-width: 1100px) {
  .ox-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ox-demo-card {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .nav-logo,
  .navbar .nav-logo {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
  }

  .nav-logo img,
  .navbar .nav-logo img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }

  .hero-card img {
    max-width: 160px !important;
    max-height: 160px !important;
  }

  .ox-services-grid {
    grid-template-columns: 1fr !important;
  }

  .ox-service-card {
    min-height: auto !important;
  }

  .faq-list {
    width: 100% !important;
  }

  .auth-page,
  .auth-main,
  .auth-section,
  .login-page,
  .signup-page,
  .forgot-page,
  .social-login-page,
  .social-signup-page {
    padding-top: 120px !important;
  }
}