* {
  margin: 0px;
  padding: 0px;
}
 body {
      background: black; /*  #fffccf;*/
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      margin: 10px 20px 10px 20px;
      display: flex; /* Utilise Flexbox pour empiler header, main-container, footer */
      flex-direction: column; /* Empile les éléments verticalement */
      min-height: 100vh; /* S'assure que le corps prend au moins toute la hauteur de la fenêtre */
      }

      /* Styles pour l'en-tête fixe */
      .header {
        background-color:#bfbfbf;
        height: 90px;
        text-align: center;
        position: fixed; /* Rend l'en-tête fixe */
        top: 0; /* Fixe l'en-tête en haut */
        width: 100%; /* L'en-tête prend toute la largeur */
        box-sizing: border-box; /* Inclut le padding dans la largeur */
        z-index: 1000; /* Assure que l'en-tête est au-dessus des autres éléments */
      }

      .header-logo {
        max-width: 600px; /* Ajustez la taille de votre logo si nécessaire */
        height: 60px;
      }

      /* Styles pour le pied de page fixe */
      .footer {
        background-color: blue;
        padding: 10px 20px;
        text-align: center;
        color: white;
        position: fixed; /* Rend le pied de page fixe */
        bottom: 0; /* Fixe le pied de page en bas */
        width: 100%; /* Le pied de page prend toute la largeur */
        box-sizing: border-box; /* Inclut le padding dans la largeur */
        z-index: 1000; /* Assure que le pied de page est au-dessus des autres éléments */
      }

      h3, h4 {
        margin-bottom: 15px;
      }

      /* Conteneur principal pour les colonnes (menu gauche + contenu droit) */
      #main-container {
        background-color: yellow;
        display: flex; /* Utilise Flexbox pour les colonnes */
        flex-grow: 1; /* Permet à ce conteneur de prendre l'espace restant */
        margin: 80px 0 50px ; /* Espace pour l'en-tête fixe (ajuster si la hauteur de l'en-tête change) */
        overflow-y: auto; /* Permet le défilement si le contenu dépasse */
      }

      #menu-gauche {
        width: 200px; /* Largeur de votre menu */
        background-color: #f0f0f0;
        color: blue;
        padding-left: 5px;
        box-shadow: 5px 5px 5px yellow;
        overflow-y: auto; /* Permet le défilement si le menu est long */
        height: auto; /* Permet au menu de s'adapter à la hauteur disponible */
      }

      #menu-gauche ul {
        list-style: square;
        padding-left:2px ;
        margin-bottom: 3px;
      }

      #menu-gauche li {
         list-style-position: inside;
         padding-left: 5px;
         padding-bottom: 5px;
         font-size: 12px;
      }

      #menu-gauche a {
        text-decoration: none;
        color: #3b3b3b;
        /*display: block; */
        padding: 5px;
        border-radius: 4px;
      }

      #menu-gauche a:hover {
        background-color: rgb(3, 3, 158);
        color: white;
      }

      #contenu-droite {
        flex-grow: 1; /* Prend l'espace restant */
        padding: 15px;
        overflow-y: auto; /* Permet le défilement si le contenu est long */
        height: auto; /* Permet au contenu de s'adapter à la hauteur disponible */
      }

      iframe {
        width: 100%;
        height: 100%;
        border: none; /* Supprime la bordure par défaut de l'iframe */
      }