/* =============================================================================
   NAVBAR.CSS – 🌐 Barre de navigation (glass-morphism + responsive)
   Harmonisé le 2025-07-04
   -----------------------------------------------------------------------------
   CHANGEMENTS CLÉS
   • Variables alignées : --link-accent → var(--accent) ; --link-active → var(--primary)
   • Couleurs de texte via var(--text-color/text-light) (plus de #fff/#222 en dur)
   • Hover / focus accessibles (outline, contrast AA)
   • Indentation & commentaires uniformisés avec le reste du projet
   • Aucune classe renommée ➜ compatibilité HTML intacte
   ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
   1 · CUSTOM PROPERTIES
   ------------------------------------------------------------------------ */
:root {
  --nav-blur:       blur(10px);
  --nav-shadow:     0 4px 20px rgb(0 0 0 / .20);
  --nav-bg-dark:    rgb(0 0 0 / .30);
  --nav-bg-light:   rgb(255 255 255 / .65);
  --link-accent:    var(--accent);    /* ancien #00aaff */
  --link-active:    var(--primary);   /* ancien #007bff */
}

/* ---------------------------------------------------------------------------
   2 · SHELL
   ------------------------------------------------------------------------ */
.navbar {
  position: fixed;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  background: var(--nav-bg-dark);
  border-bottom: 1px solid rgb(255 255 255 / .10);
  box-shadow: var(--nav-shadow);
  transition: background .3s ease, box-shadow .3s ease;
}

/* Thème clair */
html.light .navbar {
  background: var(--nav-bg-light);
  border-bottom-color: rgb(0 0 0 / .05);
}

/* ---------------------------------------------------------------------------
   3 · BRAND & LINKS
   ------------------------------------------------------------------------ */
.navbar-brand,
.nav-link {
  font: 500 1rem/1.2 "Inter", "Helvetica Neue", Arial, sans-serif;
  padding: .5rem 1rem;
  color: var(--text-color);
  border-radius: 4px;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}

.nav-link:is(:hover, :focus) {
  color: var(--link-accent) !important;
  background: rgb(255 255 255 / .05);
  outline: none;
}

.nav-link[aria-current="page"] {
  color: var(--link-accent) !important;
  border-bottom: 2px solid var(--link-accent);
  font-weight: 600;
}

/* Thème clair */
html.light .navbar-brand,
html.light .nav-link {
  color: var(--text-light);
}
html.light .nav-link:is(:hover, :focus) {
  background: rgb(0 0 0 / .05);
}
html.light .nav-link[aria-current="page"] {
  color: var(--link-active) !important;
  border-bottom-color: var(--link-active);
}

/* ---------------------------------------------------------------------------
   4 · BURGER / TOGGLER
   ------------------------------------------------------------------------ */
.navbar-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: .375rem;
  background: transparent;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .25);
  transition: background .25s, box-shadow .25s;
}

html.light .navbar-toggler {
    background: rgba(30, 135, 240, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

html.dark .navbar-toggler {
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(20, 20, 40, 0.5);
}
.navbar-toggler-icon { filter: invert(1); }
html.dark .navbar-toggler-icon { filter: invert(0); }

.navbar-toggler:focus-visible {
  outline: 2px dashed var(--link-accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   5 · COLLAPSE SLIDE (mobile)
   ------------------------------------------------------------------------ */
.navbar-collapse {
  width: 100%;
  transition: max-height .4s ease-in-out;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   6 · LANGUAGE / THEME SWITCH (mobile vertical)
   ------------------------------------------------------------------------ */
.navbar .ms-auto {
  margin-top: 1rem;
  padding-top: .5rem;
  border-top: 1px solid rgb(255 255 255 / .10);
}
html.light .navbar .ms-auto {
  border-top: 1px solid rgb(0 0 0 / .10);
}

.btn-theme-toggle {
  text-decoration: none;
}
.btn-theme-toggle:focus {
  outline: none;
  border: none;
}
.btn-theme-toggle {
  display: flex; /* ou block selon ton design */
  align-items: center;
  justify-content: center;
}

.btn-theme-toggle:hover,
.btn-theme-toggle:focus,
.btn-theme-toggle:active {
  text-decoration: none;
  outline: none;
  border: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   7 · BREAKPOINTS
   ------------------------------------------------------------------------ */
/* ≤ 768 px */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: .8rem 1.2rem;
  }
  .nav-link {
    display: block;
    width: 100%;
    padding: .75rem 0;
  }
  .language-theme-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    align-items: center;
  }
  .language-theme-container .form-select,
  .language-theme-container .btn-theme-toggle {
    width: 100%;
  }
}

/* ≥ 769 px */
@media (min-width: 769px) {
  .language-theme-container {
    display: flex;
    flex-direction: row;
    gap: .8rem;
    margin-top: 0;
    width: auto;
    justify-content: flex-end;
    align-items: center;
  }
  .language-theme-container .form-select,
  .language-theme-container .btn-theme-toggle {
    width: auto;
    margin: 0;
  }
}

/* ==========================================================================
   🎨 Ajustements couleur navbar selon thème
   ========================================================================== */

/* 🔹 MODE CLAIR */
html.light .navbar-nav .nav-link {
  color: var(--text-color);
}

html.light .navbar-nav .nav-link:hover,
html.light .navbar-nav .nav-link.active {
  color: var(--primary); /* ou une autre couleur claire visible sur fond clair */
}

/* 🌙 MODE SOMBRE */
html.dark .navbar-nav .nav-link {
  color: var(--text-color);
}

html.dark .navbar-nav .nav-link:hover,
html.dark .navbar-nav .nav-link.active {
  color: var(--accent); /* ou autre violet plus lisible sur fond sombre */
}

/* Correction finale des couleurs de .navbar-brand */
html.dark .navbar-brand {
  color: var(--text-color); /* Blanc en dark mode */
}
html.light .navbar-brand {
  color: var(--text-color); /* Noir/gris foncé en light mode */
}

/* ====================================
   ✅ Priorité finale pour NAVBAR
   ==================================== */

/* 🔹 Light mode : survol et actif = bleu */
html.light .navbar-nav .nav-link:hover,
html.light .navbar-nav .nav-link.active {
  color: var(--primary) !important;
}

/* 🌙 Dark mode : survol et actif = violet */
html.dark .navbar-nav .nav-link:hover,
html.dark .navbar-nav .nav-link.active {
  color: var(--accent-hover) !important;
}

/* Titre à gauche ("Mounir Lamara") */
html.light .navbar-brand {
  color: var(--text-color) !important;
}
html.dark .navbar-brand {
  color: var(--text-color) !important;
}

/* ───────────────────────────────────────────────────────────
   Sticky navbar hide/show on scroll
─────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;         /* on fixe la navbar en haut */
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Quand on descend, on lui applique cette classe pour la pousser vers le haut */
.navbar--hidden {
  transform: translateY(-100%);
}