.nav-links.open,
    .nav-links.closed {
      transform: translateY(0);
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* Prend toute la hauteur de l'écran */
      margin: 0; /* Supprime les marges par défaut */
    }

    header
    {
        background-color: #2a4a6e;
    }

    /* Contenu principal flexible */
    main {
      flex: 1; /* Prend tout l'espace disponible */
      padding: 2rem;
      max-width: 80%; /* Largeur maximale de 80% */
      margin: 0 auto; /* Centrage horizontal */

    }

    /* Footer fixe en bas */
    footer {
      color: white; /* Texte en blanc */
      padding: 0rem;
      text-align: center;
      /*background-color: #0069a8;*/
    }

    /* Masquer le menu par défaut sur les petits écrans */
    @media (max-width: 60em) { /* 60em = 960px (breakpoint large de Tachyons) */
      .nav-links {
        position: absolute;
        top: 100%; /* Positionne le menu sous la navbar */
        left: 0;
        width: 100%;
        background-color: #2a4a6e; /* Fond sombre pour le menu */
        flex-direction: column;
        align-items: center;
        transform: translateY(-100%); /* Masque le menu par défaut */
      }
      .nav-links.open {
        transform: translateY(4em); /* Affiche le menu lorsqu'il est ouvert */
        top:0;
        width: 90%;
        left: 10%;
        background-color: #0084d1; /* Fond sombre pour le menu */
      }

      .nav-links.closed {
        display: none;
      }

      .nav-links a {
        width: 100%; /* Les liens prennent toute la largeur */
        text-align: center; /* Centre le texte */
        padding: 1rem; /* Espacement interne */
      }

      .nav-links a:hover {
        background-color: #2a4a6e !important;
      }
    }