header{
display:flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    align-self: stretch;
    height:75px;
}

#headerContent{
    display: flex;
    height: 38px;
    justify-content: center;
    align-items: center;
    gap: 22px;
}

nav{
    display: flex;
    gap:22px;
}

nav a, 
nav button,
#actualLanguage {
    -webkit-tap-highlight-color: transparent; /* Supprime le highlight sur iOS/Android */
    outline: none;
}

nav a:focus, 
nav a:active,
nav button:focus,
nav button:active,
#actualLanguage:focus,
#actualLanguage:active {
    background-color: white;
    color: #0D3C30;
}

nav a, button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color:#0D3C30;
    text-align: center;
    font-family: "Satoshi Variable";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 80px; /* 400% */
    letter-spacing: 3.2px;
    text-transform: uppercase;
    text-decoration: none;
    border:none;
    background-color: white;
    width: 200px;
    margin:0;
    cursor: pointer;
}

.subnav button{
    max-height: 70px;
}


.subnav-content{
    
        display: none;
        position: absolute;
        top: 100%; /* Positionné juste en dessous du bouton */
        left: 0;
        width: 200px;
        background-color: white;
        z-index: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
      
      
}

.subnav-content a, .language {
    float: left;
    text-decoration: none;

    color: #000;
    text-align: center;
    font-family: "Satoshi Variable";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    line-height: normal;
    padding:20px 5px;
    gap:unset;
    min-height:20px;
  }

  .subnav:hover .subnav-content,
  .subnav-content:hover {
      display: flex;
  }
  .subnav {
    position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


#sublanguages{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 80px;
}

#languages{


     display: none;
        position: absolute;
        top: 75px;
        left: 0;
        width: 200px;
        background-color: white;
        z-index: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
   
}

#languages.open{
    display:flex;
}

#subnav1.open{
    display:flex;
}
#subnav2.open{
    display:flex;
}

#sublanguages:hover #languages, #languages:hover{
    display:flex;
}



#actualLanguage{
    display: flex;
    align-items: center;
    max-height: 70px;
    width: 200px; 
    justify-content: center;

}

#actualLanguage p{
    display: flex;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    line-height: 80px;
     margin: 0;
}



/* Menu nav petits écrans */
/* Cacher le bouton menu par défaut */
#menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

/* Styles pour le bouton hamburger */
.burger-line {
    width: 25px;
    height: 3px;
    background-color: black;
    margin: 5px 0;
    transition: 0.4s;
}

/* Styles responsives */
        @media(max-width: 950px) {

            header{
                justify-content: flex-end;
            }

            #menu-toggle {
                display: block;
                width:auto;
               
            }

            #headerContent {
                display: none;
                position: absolute;
                top: 91px;
                right: 0;
                width: 40%;
                background-color: white;
                flex-direction: column;
                align-items: stretch;
                height: auto;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                z-index: 999;
            }

            #headerContent.mobile-open {
                display: flex;
            }

            nav {
                flex-direction: column;
                gap: 0;
                width: 100%;
            }

            nav a, button {
                width: 100%;
                line-height: 50px;
                font-size: 16px;
                padding: 15px 20px;
                border-bottom: 1px solid #eee;
                justify-content: flex-start;
            }

            .language {
                min-height:20px;
                 width: 100%; 
                padding: 20px 10px; 
                 height: auto;
                font-size: 12px;
                text-align: left; 
                border-bottom: 1px solid #eee;
            }

            #sublanguages {
                width: 100%;
                
            }

            #actualLanguage {
                width: 100%;
                justify-content: flex-start;
                padding: 15px 20px;
                max-height: none;
            }

            #languages {
                position: static;
                width: 100%;
               justify-content: flex-start;
               align-items: flex-start;
                
            }

            #languages.mobile-open {
                display: flex;
            }


            .subnav {
                width: 100%;
            }

            .subnav button {
                width: 100%;
                max-height: none;
                justify-content: flex-start;
            }

            .subnav-content {
                position: static;
                width: 100%;
                align-items: flex-start;
                justify-content: flex-start;
                
            }

            .subnav-content.mobile-open {
                display: flex;
            }

            .subnav-content a, .language {
                font-size: 12px;
                text-align: left;
                padding: 20px 10px;
               
            }

         
        }

@media(max-width:550px){
    #headerContent{
        width: 60%;
    }
}


@media(max-width:360px){
    #headerContent{
        width: 80%;
    }
}