/* Reset et base */
* { margin: 0; padding: 0; box-sizing: border-box;}


.navbar { color: white; padding: 1rem; }

.navbar-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto;}

/* Menu principal */
.menu { display: flex; list-style: none; gap: 1rem; z-index: 1000; }

.menu > li { position: relative; }

.menu a { color: #333; text-decoration: none; padding: 0.5rem 1rem; display: block; }

.menu a:hover { background-color: #007a6f; color: #fff;}

/* Sous-menu */
.submenu { display: none; position: absolute; background-color:#001935 ; list-style: none; min-width: 200px; z-index: 1001; }

.menu li:hover > .submenu { display: block; }

/* Bouton Hamburger */
.hamburger { display: none; background: none; border: 2px solid; border-radius: 6px; color:#e9c46b; cursor: pointer; padding: 0.5rem; }
.hamburger:hover { border-color:#e9c46b ; }
.hamburger span { display: block; width: 25px; height: 3px; background-color:#e9c46b ; margin: 5px 0; }
.hamburger span:hover { background-color:#001935; }

/* Responsive */
@media (max-width: 800px) {
    .hamburger { display: block; }
    .menu { display: none; flex-direction: column;  width: 70%; position: absolute; top: 86px; left: 50px;
        background-color: #001935; }
    .menu a:hover { background-color: #007a6f; }
    .menu.active { display: flex; }
    .menu > li { width: 100%; }
    .submenu { position: static; display: none; }
    .menu li:hover > .submenu { display: none; }
    .menu li.active > .submenu { display: block; }
}