Body {margin: 0 0 0 0; background-color: lightyellow; height: 100%;}
        text { font-family: "Arial", sans-serif; font-size: 12px; }
        .central-circle { fill: none; stroke: #bdbdbd; stroke-width: 4; }
        .category-circle { fill: Green; stroke: #1976d2; stroke-width: 2; }
        .tea-bullet { fill: #00ff00; stroke: #008000; stroke-width: 1; }
        .category-text { font-size: 18px; font-weight: normal; fill: white; text-anchor: middle; dominant-baseline: middle; }
        .tea-text { font-size: 15px; text-anchor: middle; dominant-baseline: middle; }
        .title { text-anchor: middle; font-size: 48px; font-weight: bold; fill: limegreen; }
        line { stroke: #b0bec5; stroke-width: 4; }
            body {
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        header {
            background-color: Black;
            color: white;
            text-align: center;
            padding: 10px;
            flex-shrink: 0;
        }
        footer {
            background-color: Black;
            color: white;
            text-align: center;
            padding: 10px;
            flex-shrink: 0;
            height: 20px;
        }
        p {text-align: center !important; font-size: 10px; color: lime;  height: 100%; margin: 0px; padding: 0px;}
        main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }
        svg {
            flex-grow: 1;
            width: 100%;
            height: 100%;
            border: 1px solid black;
            box-sizing: border-box;
            margin: 0 auto;
            transition: viewBox 0.3s ease-in-out;
        }
        #zoom-slider-container {
            position: fixed;
            bootom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%; /* Réduction de la largeur à 90% */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }
        #zoom-slider {
            width: 100%; /* Le slider occupe la largeur du conteneur */
        }

        /* menu */

        nav {
            background-color: Black;
            display: flex; 
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
        }
        .menu {
            display: inline-block;
            flex-direction: column;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            position: relative;
            margin: 0 0 0 30px;
            display: inline !important;
        }
        .menu a {
            text-decoration: none;
            color: limegreen;
            font-size: 18px;
        }
        .submenu a {
            text-decoration: none;
            color: white;
            font-size: 12px;
            padding-right: 20px;
            display:block;
            line-height: 1.5em !important;
        }
        .menu a:hover {
            color: lime;
        }
        .submenu a:hover {
            color: lime;            
        }
        .submenu {
            display: none;
            position: relative;
            top: 100%;
            left: 100%;
            text-align: left;
            transform: translate(-99%);
            padding-left: 15px ;
            padding-bottom: 5px;
            background-color: black;
            list-style: square;
            width: 140px;
            border-radius: 5px;
            border-left: 1px white solid ;
        }
        .submenu li {
            margin: 5px 0;
        }
        .menu li:hover .submenu {
            display: block;
        }
        .toggle {
            display: flex;
            font-size: 24px;
            color: lime;
            cursor: pointer;
        }
        text { pointer-events: none; user-select: none; }
        a text { pointer-events: all; } /* Ensure links remain clickable */

        /* Menu responsive */

        @media (max-width: 768px) {
            .menu {
                display: none;
                flex-direction: column;
                background-color: Black;
            }
            nav{
                display:block !important;
            }

            .menu li {
                    position: relative;
                    display: block !important;
            }
            .menu.show {
                display: block;
                text-align: left;
            }
            .submenu {
                position: relative;
                margin-left: 1px;
                padding-left: 15px;
                top: 0;
                left: 0;
                transform: translate(1%);
             }
            .toggle {
                display: flex;
                text-align: left;
            }
            p { font-size: 6px !important; }
            /*.svg1 {transform: translateY(100px;}*/
            .svg1{width:300%; margin-top : 180px;}
        }