/* ============================================================
   navbar.css — Styles de la barre de navigation Exercice.TN
   Extrait de includes/header.php — Phase 5.1 Plan de Correction
   ============================================================ */

/* ── Structure principale ── */
.navbar {
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px);
  border-bottom:2px solid #EDE9FE;
  box-shadow:0 2px 20px rgba(124,58,237,.08);
  overflow:visible;
}
.navbar .nav-inner {
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;height:68px;gap:0;
  overflow:visible;
}

/* ── Logo ── */
.navbar .logo {
  font-family:'Nunito',sans-serif;font-weight:900;font-size:1.4rem;
  color:#7C3AED;white-space:nowrap;margin-inline-end:20px;flex-shrink:0;
  letter-spacing:-.02em;
}
.navbar .logo span { color:#FF6B6B; }

/* ── Liens de navigation ── */
.navbar .nav-links { display:flex;align-items:center;gap:6px;flex:1;overflow:visible;position:relative; }
.navbar .nav-link {
  padding:8px 16px;border-radius:14px;font-size:.84rem;font-weight:800;
  color:#374151;white-space:nowrap;transition:all .15s;text-decoration:none;
  font-family:'Space Grotesk',sans-serif;
  background:linear-gradient(180deg,#ffffff 0%,#f0ecff 100%);
  border:1.5px solid #d4c8f8;
  box-shadow:3px 5px 0 #b8a8f0, 4px 7px 12px rgba(124,58,237,.15);
  transform:translateY(0);
  position:relative;
}
.navbar .nav-link:hover {
  color:#7C3AED;
  background:linear-gradient(180deg,#f5f0ff 0%,#e8deff 100%);
  box-shadow:1px 3px 0 #b8a8f0, 2px 5px 8px rgba(124,58,237,.2);
  transform:translateY(2px);
}
.navbar .nav-link.active {
  color:#7C3AED;
  background:linear-gradient(180deg,#ede9fe 0%,#ddd6fe 100%);
  box-shadow:0 1px 0 #b8a8f0, 1px 2px 6px rgba(124,58,237,.2);
  transform:translateY(3px);
  border-color:#c4b5fd;
}

/* ── Barre de recherche ── */
.nav-search {
  display:flex;align-items:center;gap:8px;
  background:#F5F3FF;border:2px solid #DDD6FE;
  border-radius:999px;padding:7px 14px;
  width:190px;flex-shrink:0;margin:0 12px;transition:all .25s;
}
.nav-search:focus-within {
  border-color:#7C3AED;box-shadow:0 0 0 3px rgba(124,58,237,.12);
  width:230px;background:white;
}
.nav-search input {
  border:none;outline:none;font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;background:transparent;width:100%;color:#1E1B4B;
}

/* ── Actions (avatar, boutons) ── */
.nav-actions { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.nav-avatar {
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#7C3AED,#A78BFA);
  color:white;display:flex;align-items:center;justify-content:center;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:.9rem;
  box-shadow:0 3px 10px rgba(124,58,237,.35);text-decoration:none;
  transition:transform .2s;overflow:hidden;
}
.nav-avatar img { width:100%;height:100%;border-radius:50%;object-fit:cover; }
.nav-avatar:hover { transform:scale(1.08); }

/* ── Boutons navbar ── */
.nav-btn {
  padding:8px 18px;border-radius:14px;border:none;cursor:pointer;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.84rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
  transition:all .15s;position:relative;transform:translateY(0);
}
.nav-btn:hover { transform:translateY(2px); }
.nav-btn-ghost {
  background:linear-gradient(180deg,#ffffff 0%,#f9fafb 100%);
  color:#374151;border:1.5px solid #d1d5db;
  box-shadow:3px 5px 0 #9ca3af, 4px 7px 12px rgba(107,114,128,.15);
}
.nav-btn-ghost:hover {
  border-color:#7C3AED;color:#7C3AED;
  background:linear-gradient(180deg,#f5f3ff 0%,#ede9fe 100%);
  box-shadow:1px 3px 0 #9ca3af, 2px 5px 8px rgba(124,58,237,.2);
  transform:translateY(2px);
}
.nav-btn-primary {
  background:linear-gradient(180deg,#8b5cf6 0%,#7c3aed 100%);
  color:white;border:1.5px solid #6d28d9;
  box-shadow:3px 5px 0 #5b21b6, 4px 7px 14px rgba(124,58,237,.4);
}
.nav-btn-primary:hover {
  background:linear-gradient(180deg,#7c3aed 0%,#6d28d9 100%);
  box-shadow:1px 3px 0 #5b21b6, 2px 5px 10px rgba(124,58,237,.5);
  transform:translateY(2px);
}

/* ── Dropdowns ── */
.nav-more { position:relative;z-index:100; }
.nav-more-btn {
  padding:8px 16px;border-radius:14px;font-size:.84rem;font-weight:800;
  color:#374151;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;display:flex;align-items:center;
  gap:5px;white-space:nowrap;transition:all .15s;
  background:linear-gradient(180deg,#ffffff 0%,#f0ecff 100%);
  border:1.5px solid #d4c8f8;
  box-shadow:3px 5px 0 #b8a8f0, 4px 7px 12px rgba(124,58,237,.15);
  transform:translateY(0);position:relative;
}
.nav-more-btn:hover {
  color:#7C3AED;
  background:linear-gradient(180deg,#f5f0ff 0%,#e8deff 100%);
  box-shadow:1px 3px 0 #b8a8f0, 2px 5px 8px rgba(124,58,237,.2);
  transform:translateY(2px);
}
.nav-more-btn.active {
  color:#7C3AED;
  background:linear-gradient(180deg,#ede9fe 0%,#ddd6fe 100%);
  box-shadow:0 1px 0 #b8a8f0, 1px 2px 6px rgba(124,58,237,.2);
  transform:translateY(3px);border-color:#c4b5fd;
}
.nav-more-btn .nav-chevron { display:inline-block;transition:transform .2s;font-style:normal;font-size:.7rem;opacity:.6; }
.nav-more.open .nav-more-btn .nav-chevron { transform:rotate(180deg); }

.nav-dropdown {
  position:absolute;top:calc(100% + 8px);left:0;
  background:white;border:2px solid #EDE9FE;border-radius:16px;
  padding:8px;min-width:240px;width:max-content;
  box-shadow:0 16px 48px rgba(124,58,237,.18);
  opacity:0;pointer-events:none;
  transform:translateY(-10px) scale(.97);
  transform-origin:top left;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);z-index:300;
}
.nav-more.open .nav-dropdown { opacity:1;pointer-events:all;transform:translateY(0) scale(1); }
#nav-user-dropdown { left:auto;right:0;transform-origin:top right; }
.nav-dropdown a {
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:10px;font-size:.86rem;font-weight:600;
  color:#374151;text-decoration:none;transition:all .15s;white-space:nowrap;
}
.nav-dropdown a:hover { background:#F5F3FF;color:#7C3AED;padding-left:18px; }
.nav-dropdown .drop-divider { height:1px;background:#F3F0FF;margin:6px 8px; }
.nav-dropdown .drop-section-label {
  font-size:.7rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;color:#9CA3AF;padding:6px 14px 2px;
}

/* ── Notifications ── */
.notif-btn {
  position:relative;padding:7px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#6B7280;text-decoration:none;font-size:1.1rem;
  transition:all .2s;border:2px solid transparent;
}
.notif-btn:hover { background:#F5F3FF;color:#7C3AED;border-color:#DDD6FE; }
.notif-dot {
  position:absolute;top:4px;right:4px;width:8px;height:8px;
  background:#FF6B6B;border-radius:50%;border:2px solid white;
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,.4)}
  50%{box-shadow:0 0 0 4px rgba(255,107,107,0)}
}

/* ── Thème toggle ── */
.theme-toggle {
  width:36px;height:36px;border-radius:50%;
  border:2px solid #DDD6FE;background:white;
  color:#6B7280;cursor:pointer;font-weight:900;
  transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.theme-toggle:hover { color:#7C3AED;background:#F5F3FF;border-color:#C4B5FD; }

/* ── Hamburger mobile ── */
.mobile-menu-btn { display:none;width:40px;height:40px;border:none;background:transparent;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s; }
.mobile-menu-btn:hover { background:#F3F4F6; }
.mobile-menu-btn span { display:block;width:100%;height:2.5px;background:#1E1B4B;border-radius:2px;transition:all .3s; }
.mobile-menu-btn span:nth-child(2) { margin:5px 0; }
.mobile-menu-btn.active span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity:0; }
.mobile-menu-btn.active span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ── Menu mobile overlay ── */
.mobile-menu { position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s; }
.mobile-menu.active { opacity:1;pointer-events:all; }
.mobile-menu-content { position:absolute;top:0;right:0;width:min(320px,85vw);height:100%;background:white;box-shadow:-4px 0 20px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .3s;overflow-y:auto;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
.mobile-menu.active .mobile-menu-content { transform:translateX(0); }
.mobile-menu-section { margin-bottom:24px; }
.mobile-menu-section-title { font-family:'Nunito',sans-serif;font-weight:900;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#9CA3AF;margin-bottom:12px; }
.mobile-menu-link { display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-size:.9rem;font-weight:600;color:#374151;text-decoration:none;transition:all .15s;margin-bottom:4px; }
.mobile-menu-link:hover,.mobile-menu-link.active { background:#F5F3FF;color:#7C3AED; }
.mobile-menu-link span { font-size:1.2rem; }
.mobile-search { margin-bottom:20px; }
.mobile-search form { display:flex;align-items:center;gap:8px;background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:12px;padding:10px 14px; }
.mobile-search input { border:none;outline:none;font-family:'Space Grotesk',sans-serif;font-size:.9rem;background:transparent;width:100%;color:#1E1B4B; }
.mobile-search input::placeholder { color:#9CA3AF; }

/* ── Responsive ── */
@media(max-width:1100px){
  .nav-links { display:none; }
  .nav-search { display:none; }
  .mobile-menu-btn { display:flex;flex-direction:column;justify-content:center; }
  .nav-actions .nav-btn-ghost:not([style*="color:#EF4444"]) { display:none; }
  .nav-actions .theme-toggle { display:none; }
}
@media(min-width:901px) and (max-width:1100px){
  .navbar .nav-inner { padding:0 16px;gap:0; }
  .navbar .nav-link { padding:7px 12px;font-size:.8rem; }
  .navbar .nav-more-btn { padding:7px 12px;font-size:.8rem; }
  .nav-search { width:160px;margin:0 8px; }
  .nav-search:focus-within { width:190px; }
}

/* ── Icônes Lucide dans la navbar ── */
.nav-icon {
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;vertical-align:middle;
}
.nav-icon svg { width:16px;height:16px;stroke-width:2; }
.nav-dropdown a .nav-icon { width:17px;height:17px; }
.nav-dropdown a .nav-icon svg { width:17px;height:17px; }
.mobile-menu-link .nav-icon { width:20px;height:20px; }
.mobile-menu-link .nav-icon svg { width:20px;height:20px; }
.footer-col a .nav-icon { width:15px;height:15px; }
.footer-col a .nav-icon svg { width:15px;height:15px; }
.autocomplete-result-item:hover { background:#F5F3FF !important; }

/* ── Transition de page ── */
body { opacity:0;transition:opacity 0.3s ease-in-out; }
body.loaded { opacity:1; }