/* ================================
   MENU NAVIGATION
================================ */

.main-header{
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:1000;
}

.nav-container{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 0;
}

/* logo */

.logo{
font-size:22px;
font-weight:700;
color:#2BB7A4;
}

/* ================================
   MENU DESKTOP
================================ */

.nav-menu > ul{
display:flex;
gap:30px;
list-style:none;
align-items:center;
}

.nav-menu a,
.dropdown-toggle{
background:none;
border:none;
font-size:16px;
cursor:pointer;
font-weight:500;
color:#333;
}

.nav-menu a:hover{
color:#2BB7A4;
}

/* petite flèche */

.dropdown-toggle::after{
content:" ▼";
font-size:11px;
margin-left:6px;
}

/* ================================
   DROPDOWN
================================ */

.dropdown{
position:relative;
}

.dropdown-menu{

position:absolute;
top:100%;
left:0;

background:white;

border-radius:8px;

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

padding:10px 0;

min-width:200px;

display:none;

z-index:1000;
}

.dropdown-menu{
display:none;
flex-direction:column;
}

.dropdown-menu li{
padding:8px 20px;
white-space:nowrap;
}

.dropdown-menu a{
font-size:15px;
}

.dropdown-menu li:hover{
background:#f4f6f8;
}

/* ouverture */

.dropdown.open > .dropdown-menu{
display:block;
}

/* ================================
   RIGHT SIDE
================================ */

.nav-right{
display:flex;
align-items:center;
gap:15px;
}

.lang-select{
padding:6px 10px;
border-radius:6px;
border:1px solid #ddd;
}

.contact-btn{
background:#2BB7A4;
color:white;
padding:8px 14px;
border-radius:6px;
font-weight:500;
}

.contact-btn:hover{
background:#239a8a;
}

/* ================================
   HAMBURGER
================================ */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
}

.hamburger span{
width:26px;
height:3px;
background:#333;
transition:0.3s;
}

/* animation X */

.hamburger.open span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.hamburger.open span:nth-child(2){
opacity:0;
}

.hamburger.open span:nth-child(3){
transform:rotate(-45deg) translate(5px,-5px);
}

/* ================================
   MOBILE
================================ */

@media (max-width:900px){

.nav-menu{

position:fixed;

top:0;
right:-100%;

width:260px;
height:100%;

background:white;

display:flex;
flex-direction:column;

padding:30px;

transition:0.4s;

box-shadow:-5px 0 20px rgba(0,0,0,0.15);

}

.nav-menu.active{
right:0;
}

.nav-menu ul{
flex-direction:column;
gap:18px;
align-items:flex-start;
}

/* dropdown mobile */

.dropdown-menu{

position:static;

box-shadow:none;

padding-left:10px;

background:transparent;

}

.dropdown-menu li{
padding:6px 0;
}

.hamburger{
display:flex;
}

}



/* aligner les éléments à droite sur desktop */

.nav-lang{
margin-left:auto;
}

/* mobile */

@media (max-width:900px){

.nav-lang{
margin-left:0;
}

.nav-contact{
margin-top:10px;
}

.lang-select{
width:100%;
}

.contact-btn{
display:block;
text-align:center;
}

}



/* LANG DROPDOWN PREMIUM */
.lang-dropdown{
  position:relative;
  display:inline-block;
}

.lang-toggle{
  background:#2BB7A4;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

.lang-toggle:hover{
  background:#239a8a;
}

.lang-menu{
  position:absolute;
  top:100%;
  left:0;
  background:white;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  border-radius:6px;
  margin-top:6px;
  min-width:80px;
  list-style:none;
  padding:5px 0;
  display:none;
  z-index:1000;
}

.lang-menu li{
  padding:6px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
}

.lang-menu li:hover{
  background:#f4f6f8;
}

/* ouverture */
.lang-dropdown.open > .lang-menu{
  display:block;
}



/* ================================
   CONTACT BUTTON
================================ */

.contact-btn{
  background: #F1C85A; /* jaune doux */
  color: #1F2A44;      /* texte sombre pour contraste */
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.contact-btn:hover{
  background: #e0b94a; /* légèrement plus foncé au hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(241,200,90,0.25);
}



/* ================================
   CONTACT BUTTON DANS LE MENU
================================ */
.nav-contact .contact-btn {
  background: #F1C85A; /* jaune doux */
  color: #1F2A44;      /* texte sombre pour contraste */
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.nav-contact .contact-btn:hover {
  background: #e0b94a; /* légèrement plus foncé au hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(241,200,90,0.25);
}