@charset "utf-8";

html, 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('image04.jpg'); */
	  background-image: none;
	  background-color: #565455; 
	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: 100%; /*100vh*/
}
/* Le conteneur MENUS  occupe 20% de la hauteur de l'écran  -------------- */
.menus-container {
  position: relative ; 
  flex-shrink: 0; /* Empêche ce bloc de se déformer ou de rétrécir */ 
  height: 10vh; /* SPECIAL */ 
}
/* Fenêtre avec défilement (en-dessous)  -------------------------------- */
.tables-container{
	position: relative ; 
	height: 90vh; /* SPECIAL */
	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; */
  overflow-y: auto; /* Active le défilement vertical si le contenu déborde */
  width: 100% ;             /* Prend toute la largeur de la page */
  /*max-width: 70%;  SPECIAL ICI  */
  overflow-x: auto; /* Active une barre de défilement horizontale UNIQUEMENT sur petit écran */  /*overscroll-behavior: contain; /* Bloque toute fuite de scroll */
  background-color: transparent;
}

/* 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: 25px;
  left: 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; 
  /*border: 1px solid white; */
}
/* 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: 160px;
  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  ------------------------------------------ */

/* ========================================================================== */