body {
  margin: 0; 
  padding: 0; 
  height: 100vh; 
  min-height: 100vh; /* Assure que le body prend toute la hauteur de l'affichage */
  overflow: hidden; 
  /*overflow-y: hidden; */
  font-family: 'Open sans'; 
  background-image: url('img/lacarte.jpg'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
}
/*  Le conteneur occupe 100% de la hauteur de l'écran */
.page-container {
  display: flex; 
  /*margin-block: auto; */
  flex-direction: column;
  align-items: center; /* Centre verticalement */
  height: 100vh; /*100vh*/
}
/* Le conteneur MENUS  occupe 25% de la hauteur de l'écran (au-dessus)--------- */
.menus-container {
  position: relative ; 
  width: 100% ;             /* Prend toute la largeur de la page */
  flex-shrink: 0; /* Empêche ce bloc de se déformer ou de rétrécir */ 
  height: 25vh;
}
/* Fenêtre avec défilement occupe 75% de la hauteur écran (en-dessous)  -------------------------------- */
.tables-container{
  position: relative; 
  height: 75vh; 
  z-index: 1; 
  display: flex; 
  /*flex-grow: 1; /* Remplit tout l'espace vide en bas */
  flex-direction: column;
  align-items: center; /* Centre verticalement */
  top: 0px ; /* 280px */
  /*left:400px; */
  width: 100% ;             /* Prend toute la largeur de la page */
  max-width: 70%; 
  overflow-x: auto; /* Active une barre de défilement horizontale UNIQUEMENT sur petit écran */  /*overscroll-behavior: contain; /* Bloque toute fuite de scroll */
  overflow-y: auto; /* Active le défilement vertical si le contenu déborde */
  background-color: transparent;
  /* min-width: 900px; */
}
/* Barre de navigation -  Menu Horizontal  ------------------------------------------ */
.navbar {
  display: flex ; /* Active le mode Flexbox */
  /*justify-content: center;  /* Centre les éléments horizontalement */
  position: fixed; /* Reste bloqué en haut */
  /*border: 1px solid white; */
  list-style: none;
  align-items: center;
  top: 4%; /* 25px */
  left: 30%; /* 550px */
  width: 100%;
  padding: 10px 10px;
  background-color: transparent; /* #1a1a1a  */
  z-index: 1000; /* Reste au-dessus du contenu */
}
/* Force le menu à s'empiler verticalement sur mobile */
.navbar ul {
  /*display: block; */
  padding: 0;
  margin: 0;
  width: 100%;
}
/* Éléments de liste */
.navbar li {
  position: relative; /* IMPORTANT POUR POSITIONNEMENT DU SOUS-MENU */
  margin-left: 20px; 
  margin-right: 20px; 
}
/* Liens hypertexte */
.navbar a {
  display: block; 
  text-decoration: none;
  padding: 3px 5px 3px 1px ; /* Haut Droite Bas Gauche */  
  color: #ffffff; /* blanc */
  font-size: 24px;
  font-weight: 500;
}
/* Effets au survol et lien actif */
.navbar a:hover  {
  color: #3498db; /* Couleur bleue */
  background-color: transparent; /* #555 */ 
}
/*img {min-width:90%;max-width:95%;margin:1em} */
/* --- Sous-menu vertical --- */
.submenu-vertical {
  display: none; /* Caché par défaut */
  position: absolute;
  top: 100%; /* Juste en dessous du lien parent */
  /* left: 0; */
  background-color: #444;
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1000;
}
.submenu-vertical li {
  width: 100%; 
  list-style: none;
  text-align: left;
}
.submenu-vertical a {
  display: block; 
  padding: 2x 2px; 
  text-decoration: none; 
  text-align: left; 
  font-size: 16px; 
}
/* L'astuce magique : afficher au survol */
.has-submenu:hover .submenu-vertical {
  display: block;
}
/* Fin de Barre de navigation -  Menu Horizontal  ------------------------------------------ */