* {
            margin: 0;
            padding: 0;
        }
        
        .body {
            background: white;
            
        }
        
         .h4 {
           
           color: #003040;
           font-family: 'verdemoderna', sans-serif;
           font-size: 0.5em;
           font-weight: normal;
           text-transform: uppercase;
           text-align:center;
        }

        
         #accordian {
        background: #327f8a;
        width: 250px;
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        color: white;
        box-shadow: 5px 0 15px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5);
        overflow-y: auto;
        padding-top: 20px;
    }
    
    #accordian h3 {
        background: #003040;
        background: linear-gradient(#003040, #002535);
    }
    
    #accordian h3 a {
        padding: 0 10px;
        font-size: 12px;
        line-height: 34px;
        display: block;
        color: white;
        text-decoration: none;
    }
    
    #accordian h3:hover {
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
    }
    
    .i {
        margin-right: 10px;
    }
    
    #accordian li {
        list-style-type: none;
    }
    
    #accordian ul ul li a {
        color: white;
        text-decoration: none;
        font-size: 12px ;
        line-height: 27px;
        display: block;
        padding: 0 15px;
        transition: all 0.15s;
        position: relative;
        border: 1px solid #003545;
    }
    
    #accordian ul ul li a:hover {
        background: #003545;
        border-left: 5px solid lightgreen;
    }
    
    #accordian ul ul {
        display: none;
    }
    
    #accordian li.active > ul {
        display: block;
    } 
    
    .menu-button {
    background-color:#327f8a; 
    color: #fff; 
    border: none;
    padding: 10px 15px;
    font-size: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-left: 5px solid #003040;
}

.menu-button:hover {
    background-color:#003545;
    border-left: 5px solid lightblue;

}


       
        #toggle-bar {
            position: fixed;
            top: 0;
            left: 250px;
            width: 20px;
            height: 100%;
            background: #235860;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-right: 2px solid #0D2E31;
             
        }
        #toggle-bar span {
            transform: rotate(90deg);
            font-size: 20px;
            user-select: none;
        }



        #toggle-bar:hover {
            background: #718E90;
        }
        
        
         #menu-container.hidden {
            transform: translateX(-270px); /* Moves the entire menu out of view */
        }

        #controls {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

  #logo-container {
    text-align: center;
    padding: 10px 0; /* Espacement */
   
    margin-top:-20px;
   

}

#logo-container img {
    width: 100%; 
    height: auto;
    display: block;
      margin-top:-10px;
       
}

 #graph-title {
           
           color: #607476;
           font-family: 'verdemoderna', sans-serif;
           font-size: 1em;
           font-weight: normal;
           
           text-align:center;
      }
      
      .chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}