@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('image01.jpg');  /* Spécifie le chemin de l'image */
  background-size: cover;  /* Redimensionne l'image pour couvrir tout l'écran en préservant les proportions */
  background-position: center center ;  /* Centre l'image horizontalement et verticalement */
  background-repeat: no-repeat;   /* Empêche l'image de se répéter si l'écran est très grand */
  background-attachment: fixed;  /* Force l'image à se figer par rapport à l'écran lors du défilement (optionnel) */
}
/*  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: 25vh
}
/* Fenêtre avec défilement (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; */
  overflow-y: auto; /* Active le défilement vertical si le contenu déborde */
  /*width: 100% ;             /* Prend toute la largeur de la page */
  max-width: 60%; 
  /*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: 2px 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  ------------------------------------------ */

/* 4. Fenêtre avec défilement (en-dessous)  -------------------------------- */
.div1 {
	position: fixed; 
	bottom: 10px ; 
	left: 30%; 
	width: 550px; 
	height: 70px; 
	background-color: transparent;
	border: 1px solid white; 
}
.div1 p {
	margin: 10px 10px 10px 10px ; 
	text-align: center center ; 
	color: #ffffff; 
	font-size: 24px; 
}
.div2 {
	position: fixed; 
	bottom: 85px ; 
	left: 60%; 
	width: 380px; 
	height: 140px; 
	background-color: transparent;
	border: 1px solid white; 
}
.div2 p {
	margin: 10px 10px 10px 10px ; 
	text-align: center center; 
	color: #ffffff; 
	font-size: 16px; 
	
}
/* ==========================================================================
   CSS RESPONSIVE POUR TABLETTES ET SMARTPHONES
   ========================================================================== */
/* 1. Ajustements généraux pour tablettes et mobiles */
@media (max-width: 1024px) {
  body {
  overflow: auto; /* Permet de faire défiler toute la page si nécessaire */
}

.navbar {
    position: relative; /* Repasse dans le flux normal pour éviter de masquer le contenu */
    top: 0;
    padding: 15px 10px;
  }

  /* Force le menu à s'empiler verticalement sur mobile */
.navbar ul{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    width: 100%;
  }

.navbar li {
    margin: 5px 0;
    width: 100%;
    text-align: center;
  }

.navbar a {
    font-size: 20px; /* Réduit un peu la taille du texte */
    padding: 8px;
  }
/* ==========================================================================
   CSS RESPONSIVE POUR TABLETTES ET SMARTPHONES
   ========================================================================== */