.main-nav {
  --nav-bg:#000;
  --nav-link-color:#fff;
  --nav-accent:linear-gradient(to right,#0055A4,#ff1100);
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px clamp(1rem,4vw,2.5rem);
  font-family:'Orbitron',sans-serif;
  background:var(--nav-bg);
  z-index:100;
  min-height:70px;
}

.main-nav .logo img { height:50px; width:auto; display:block; }

.nav-links {
  display:flex;
  gap:clamp(1.2rem,3.2vw,3rem);
  align-items:center;
  transition:opacity .35s ease, transform .35s ease;
  
}

.nav-links a {
  position:relative;
  color:var(--nav-link-color);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.5px;
  font-size:clamp(13px,1.2vw,15px);
  padding:6px 2px;

  
}



.nav-links a::after {
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:0; height:2px;
  background:var(--nav-accent);
  transform:translateX(-50%);
  transition:width .35s;
  border-radius:2px;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { width:90%; }

.menu-toggle {
  display:none;
  width:44px;
  height:40px;
  background:transparent;
  border:none;
  padding:6px;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  z-index:110;
  
}



.menu-toggle span {
  width:100%;
  height:3px;
  background:#fff;
  border-radius:3px;
  transition:transform .4s ease, opacity .35s ease, background .35s;
}

/* État ouvert */
.menu-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* Mobile */
@media (max-width:780px){
  .menu-toggle { display:flex; }
 /* .nav-links {
    position:absolute;
    top:100%; left:0;
    width:100%;
    flex-direction:column;
    background:rgba(0,0,0,.94);
    backdrop-filter:blur(6px);
    padding:clamp(1.2rem,4vw,2rem) clamp(1rem,5vw,2rem);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 34px -10px rgba(0,0,0,.65);
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    align-items: flex-start;
  }
  .nav-links.active {
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }*/
  /*.nav-links a { width:100%; text-align:center; }*/

  /*.nav-links a {
    font-size: clamp(14px, 4vw, 17px);
    width: 100%;
    text-align: left;
    padding-left: clamp(32px, 12vw, 60px); 
    padding-right: clamp(16px, 6vw, 40px);
    box-sizing: border-box;
  }*/
}

@media (max-width: 920px) {
  .main-nav {
    gap: 1rem;
    padding: 10px clamp(1rem,3vw,1.5rem);
  }
  .nav-links {
    gap: clamp(1.2rem, 2.6vw, 2rem);
  }
  .main-nav .logo img {
    height: 44px;
  }
}


@media (max-width: 780px) {
 

  /*.nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(6px);
    padding: clamp(1.2rem,4vw,2rem) clamp(1rem,5vw,2rem);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 34px -10px rgba(0,0,0,0.65);
    transform-origin: top center;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    gap: clamp(1rem, 2.8vw, 1.6rem);
    align-items: flex-start;
  }*/

  

  /*.nav-links.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }*/

  /*.nav-links a {
    font-size: clamp(14px, 4vw, 17px);
    width: 100%;
    text-align: center;
  }*/

  /*.nav-links a {
    font-size: clamp(14px, 4vw, 17px);
    width: 100%;
    text-align: left; 
    padding-left: clamp(32px, 12vw, 60px) !important; 
    padding-right: clamp(16px, 6vw, 40px);
    box-sizing: border-box;
  }*/



  .nav-links a::after {
    bottom: -2px;
  }
}


@media (max-width: 460px) {
  .main-nav .logo img {
    height: 40px;
  }
}

/* Centrage desktop uniquement */
@media (min-width: 781px) {
  .nav-links{
    flex: 1 1 auto;
    justify-content: center;   /* centre les liens */
    margin: 0 auto !important; /* neutralise le style inline */
  }
  /* au cas où */
  #nav-links{ margin-left: 0 !important; }
  
  .main-nav{
    justify-content: flex-start; /* on garde le flux normal */
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  .main-nav .logo{ flex: 0 0 auto; }
  .lang-switcher{ flex: 0 0 auto; }
}




/*bouton son*/

.sound-toggle-wrapper {
  flex: 0 0 auto;
  margin-left: clamp(6px, 1vw, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#sound-toggle {
  width: clamp(26px, 5vw, 32px);
  height: clamp(26px, 5vw, 32px);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  border-radius: 50%;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* iOS Safari */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: background 0.3s ease, transform 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#sound-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

#sound-toggle:active {
  transform: scale(0.92);
}


/*patch*/

@media (max-width: 780px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(6px);
    padding: clamp(1.2rem,4vw,2rem) clamp(1rem,5vw,2rem);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 34px -10px rgba(0,0,0,0.65);
    transform-origin: top center;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-start; /* commence à gauche */
    
  }

  .nav-links.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Décalage vers la droite */
    margin-left: clamp(40px, 15vw, 80px);
    
  }

  .nav-links a {
    width: 100%;
    text-align: left;
    padding-left: clamp(1rem, 5vw, 2rem) !important;
    padding-right: clamp(1rem, 5vw, 2rem) !important;
    font-size: clamp(14px, 4vw, 17px);
    
  }
}

@media (max-width: 780px) {

  .nav-links a{

    margin-right: -500% !important;



  }

  


}