/* Configuration de base */
    body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--menu-bg-color);overflow: hidden; }

    /* Barre de navigation */
    .navbar {
        background: var(--menu-bg-color);
        display: flex;
        height: 30px;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid #76716B;
        position: relative;
        z-index: 1000;
    }

    /* Menu de base */
    ul { list-style: none; margin: 0; padding: 0; display: flex; }
    li { position: relative; }

    /* Boutons du menu */
    .menu-link {
        display: block;
        padding: 0 20px;
        line-height: 30px;
        color:  #76716B;
        text-decoration: none;
        cursor: pointer;
        font-size: 12px;
    }
    .menu-link:hover { background: #1a1a1a; }

    /* Sous-menus (Niveau 1 et 2) */
    .submenu {
        display: none;
        position: absolute;
        top: 100%; /* Colle au menu parent */
        left: 0;
        background: #111;
        min-width: 180px;
        border: 1px solid #333;
    }

    /* Menu de niveau 2 (s'ouvre sur le côté) */
    .submenu .submenu {
        top: 0;
        left: 100%;
    }

    /* Affichage au survol */
    li:hover > .submenu { display: block; }
    .submenu li:hover { background: var(--menu-bg-color) }
    .submenu li:hover > a { color: #76716B; }

    .submenu a {
        display: block;
        padding: 10px 15px;
        color: white;
        text-decoration: none;
        font-size: 12px;
    }

    /* L'Iframe qui affiche votre graphe D3.js */
    #viewport {
        width: 100%;
        height: calc(100vh - 50px);
        border: none;
    }
    footer {
        height:40px;

        padding: 10px;
        text-align: center;
        z-index: 1000;
        border-top:  1px solid #76716B;
        flex-shrink: 0; /* Empêche le footer de s'écraser */
    }
    footer p {
        color:slategrey;
        font-size: 12px;
    }