/* =========================================

   1. VARIABLES & RACINE

   ========================================= */

:root {

  --nav-height: 100px;

}



/* =========================================

   2. STRUCTURE DE NAVIGATION (CONTENEUR)

   ========================================= */

.nav-container {

  height: var(--nav-height);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100vw;

  transition: height 0.25s;

  z-index: 99999999999;

}



/* =========================================

   3. BARRE DE NAVIGATION (ÉTAT PAR DÉFAUT)

   ========================================= */

.nav {

  height: calc(100px - 60px);

  display: flex;

  position: fixed;

  width: var(--width);

  z-index: 99999999999;

  border: 1px solid transparent;

  transition: all 0.25s, border 0.1s, background-color 0.1s, box-shadow 0.1s;

  transition-timing-function: cubic-bezier(0.44, -0.2, 0, 1.57);

}



/* =========================================

   4. ÉTAT AU SCROLL (.scroll .nav)

   ========================================= */

.scroll .nav {

  background-color: rgba(255, 255, 255, 0.25);

  backdrop-filter: blur(12px) saturate(180%);

  -webkit-backdrop-filter: blur(12px) saturate(180%);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 100px;

  padding: 0 10px;

  width: calc(var(--width) - 40px);

  height: calc(100px - 40px);

}



.scroll .nav-right {

    display: flex;

    align-items: center; /* Centre verticalement les menus dropdown */

    gap: 15px;

}



/* On s'assure que les boutons de menu sont centrés dans la barre réduite */

.scroll .lang-btn {

    height: 100%;

    display: flex;

    align-items: center;

}



/* =========================================

   5. PARTIES INTERNES & LAYOUT

   ========================================= */

.nav-part {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* --- Gauche (Avatar & Titre) --- */

.nav-left {

  justify-content: flex-start;

  padding-left: 20px;

  gap: 12px;

}



.user {

  display: flex;

  gap: 12px;

  align-items: center;

  text-decoration: none;

  border-radius: 300px;

  padding: 5px 5px;

  margin: -5px -5px;

  transition: all 0.3s, color 0.1s, background-color 0.1s;

  transition-timing-function: cubic-bezier(0.44, -0.2, 0, 1.57);

  color: #000;

}



.user:hover {

  background-color: #0066ff22;

  padding: 8px 12px;

  margin: -8px -12px;

  color: var(--color-primary) !important;

}



.user:active {

  padding: 5px 5px;

  margin: -5px -5px;

}



.nav-left .avatar {

  width: 32px;

  aspect-ratio: 1/1;

  border-radius: 50%;

}



.nav-left .title {

  font-size: 1.1rem;

  letter-spacing: -0.01rem;

  font-weight: 700;

  text-decoration: none;

}



/* --- Centre (Menu de Navigation) --- */

.nav-center {

  flex: 3;

}



.nav ul {

  list-style: none;

  display: flex;

  gap: 0px;

}



.nav ul li a {

  text-decoration: none;

  color: black;

  font-size: 1rem;

  font-weight: 500;

  padding: 3px 10px;

  margin: 0 8px;

  border-radius: 10px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  transition: all 0.3s, color 0.1s, background-color 0.1s;

  transition-timing-function: cubic-bezier(0.44, -0.2, 0, 1.57);

  font-optical-sizing: auto;

  font-weight: 400;

  font-style: normal;

  font-variation-settings: "wdth" 100;

}



.nav ul li a:hover {

  background-color: rgba(var(--color-primary-rgb), 0.1);

  color: var(--color-primary);

  padding: 9px 21px;

  margin: 0 16px;

  border-radius: 10px;

  font-weight: 700;

}



.nav ul li a:active {

  background-color: rgba(var(--color-primary-rgb), 0.3);

}



/* --- Droite (Boutons & Icones) --- */

.nav-right {

  justify-content: flex-end;

  padding-right: 30px;

  gap: 24px;

}



.nav-right .icon {

  width: 20px;

  height: 20px;

  opacity: 1;

}



.nav-right .icon:hover {

  opacity: 0.5;

}



.nav-right .icon img {

  width: 100%;

  height: 100%;

}



/* =========================================

   6. SÉLECTEUR ARAIGNÉES

   ========================================= */

.spider-selector {

  display: flex;

  background: rgba(0, 0, 0, 0.05);

  border-radius: 25px;

  padding: 3px;

  gap: 2px;

}



.mode-btn {

  border: none;

  padding: 6px 14px;

  border-radius: 20px;

  cursor: pointer;

  font-size: 0.8rem;

  font-weight: 700;

  background: transparent;

  color: #6b7280;

  display: flex;

  align-items: center;

  gap: 5px;

  transition: all 0.2s ease;

}



.mode-btn.active {

  background: #ffffff;

  color: #000;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



/* =========================================

   7. BOUTON & MENU LANGUE

   ========================================= */

.lang-dropdown {

  position: relative;

  display: inline-block;

}



.lang-btn {

  display: flex;

  align-items: center;

  gap: 4px;

  background: transparent;

  border: none;

  cursor: pointer;

  font-weight: 600;

  font-size: 0.9rem;

  padding: 5px 10px;

  border-radius: 8px;

  transition: background 0.2s;

}



.lang-btn:hover {

  background-color: rgba(0, 102, 255, 0.1);

}



.lang-menu {

  position: absolute;

  top: 120%;

  right: 0;

  background: white;

  border: 1px solid rgba(0,0,0,0.1);

  border-radius: 12px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.1);

  display: none;

  flex-direction: column;

  min-width: 140px;

  z-index: 10000;

  overflow: hidden;

}



.lang-menu.show {

    display: flex !important;

}



.lang-menu button {

  padding: 12px 15px;

  border: none;

  background: none;

  text-align: left;

  cursor: pointer;

  font-size: 0.9rem;

  width: 100%;

}



.lang-menu button:hover {

  background-color: #f0f7ff;

  color: #0066ff;

}



.scroll .lang-menu {

  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(10px);

}



.chevron {

  width: 16px;

  height: 16px;

  transition: transform 0.2s;

}



.lang-btn.active .chevron {

  transform: rotate(180deg);

}



/* =========================================

   8. RESPONSIVE

   ========================================= */

@media screen and (max-width: 1280px) {

  .nav ul li a {

    padding: 3px 8px;

    margin: 0 4px;

    font-size: 0.95rem;

  }



  .nav {

    width: calc(var(--width) - 12px);

  }

}



@media screen and (max-width: 800px) {

  .nav-center {

    display: none;

  }



  :root {

    --nav-height: 80px;

  }

}