/* Typographie et structure générale */
body {
  font-family: 'EB Garamond', serif;
  margin: 0;
  padding: 0;
  /* AVANT: padding-top: 40px;  */
  padding-top: 50px; /* ← pour dégager la barre fixe */
  padding-left: 10px;
  padding-right: 10px;
}

/* Barre fixe en haut */
.menu-container {
  position: fixed;
  top: 0;           /* ← collé en haut */
  left: 0;
  right: 0;
  height: 50px;     /* 10px d’air + 40px de barre */
  background-color: transparent; /* ← fond retiré ici */
  z-index: 100;
  pointer-events: none; /* pour que seul .menu capte les clics */
}

/* Menu principal (la barre visible) */
.menu {
  position: absolute;
  top: 10px;        /* espace de 10px sous le bord supérieur */
  left: 10px;       /* ← marge gauche visible */
  right: 10px;      /* ← marge droite visible */
  height: 40px;
  background-color: #bfb6b6; /* ← le fond est ici */
  display: flex;
  align-items: center;
  pointer-events: auto;
  box-sizing: border-box;
}

/* Structure du menu */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu li {
  position: relative;
  flex-grow: 0;
  text-align: center;
  border: 1px solid #ffffff;
}

.menu a {
  display: flex;
  align-items: center;
  height: 40px;   /* cohérent avec la barre */
  padding: 0 20px;
  margin: 0;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
}

/* Flèche des sous-menus */
.menu li.has-submenu > a::after {
  content: ' >';
}

/* Sous-menus */
.menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444444;
  text-align: center;
}

.menu ul ul ul {
  left: 100%;
  top: 0;
}

/* Affichage lors du survol */
.menu li:hover > ul {
  display: inherit;
}

.menu li:hover {
  background-color: #555555;
}

.menu li:hover a {
  color: #ffffff;
}

/* Sous-menus internes */
.menu ul ul li {
  border-top: 1px solid #555555;
}

.menu ul ul li a {
  padding: 10px;
  color: #ffffff;
}

.menu ul ul li:hover {
  background-color: #666666;
}

.menu ul ul li:hover a {
  color: #ffffff;
}