body {
      margin: 0;
      background: #000;
      color: #00ff00;
      font-family: "Courier New", Courier, monospace;
    }

    header {
      padding: 20px;
      border-bottom: 1px solid #00ff00;
    }

    /* Logo en ASCII art : <pre> conserve les espaces et retours à la ligne */
    pre.logo {
      margin: 0;
      line-height: 1.1;
      font-size: 14px;
    }

    h1 {
      margin: 0;
    }

    .conteneur {
      display: flex;
      min-height: calc(100vh - 150px);
    }

    nav {
      width: 154px;
      font-size: 16px;
      padding: 20px;
      border-right: 1px solid #00ff00;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* Séparateurs ASCII entre les liens (haut + après chaque lien) */
    nav ul::before,
    nav li::after {
      content: "+--------------+";
      display: block;
      white-space: pre;
      overflow: hidden;
    }

    nav li {
      margin: 0;
    }

    /* Chaque lien est un grand rectangle cliquable, encadré par des | ASCII */
    nav a {
      display: flex;
      align-items: center;
      padding: 18px 0;
      color: #00ff00;
      text-decoration: none;
    }

    nav a::before,
    nav a::after {
      content: "|";
    }

    nav a span {
      flex: 1;
      text-align: center;
    }

    nav a:hover {
      background: #00ff00;
      color: #000;
    }

    main {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center; /* centrage vertical du logo */
    }