 <style>
    body {
      font-family: 'DIN Condensed', sans-serif;
      background-color: #f0f0f0;
      color: #000000;
      margin: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      
    }

    #question {
      margin-top: 25px;
      font-size: 1.2em;
      font-family: 'DIN Condensed', sans-serif;
    }
    #gameInfo {
		font-family: 'DIN Condensed', sans-serif;
}
    #choicesContainer {
      display: none;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 12px;
      font-family: 'DIN Condensed', sans-serif;
    }

    #choicesContainer button {
      min-width: 140px;
    }

    #result {
      font-family: 'DIN Condensed', sans-serif;
      margin-top: 12px;
      font-weight: bold;
    }

    #score {
      font-family: 'DIN Condensed', sans-serif;
      margin-top: 10px;
      font-style: italic;
      color: #000000;
    }
    body-liste {
        margin: 0;
        padding: 10px 10px;
        background: #ffffff;
        font-family: 'Montserrat', sans-serif;
        color: #e0e0e0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        position: relative;
    }

h1 {
  color: #2a2a2a;
  margin-bottom: 25px;
  font-family: 'DIN Condensed', sans-serif;
  font-size: 2.4rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 2px solid #b3c618;
  padding-bottom: 5px;
  width: 100%;
  text-align: center;    /* Centre le texte */
  display: block;        /* Le h1 prend toute la largeur */
  margin-left: auto;     /* Centre l’élément */
  margin-right: auto;    /* Centre l’élément */
}


.container {
  /* ... (déjà existant) */
  display: flex;
  flex-direction: column;
  align-items: center; /* <-- Ajouté pour centrer le contenu */
}

.section {
      background: #ffffff;
      border-radius: 12px;
      box-shadow:  0 8px 24px rgba(0, 0, 0, 0.08);
      padding: 30px;
      margin-bottom: 40px;
    display: flex;
  width: 70%;
  flex-direction: column;
  align-items: center; /* <-- Ajouté pour centrer le contenu */
    }
.range-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.range-inputs label {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000000.;
}
    

    label, input {
      display: block;
      margin: 10px 0;
      font-family: 'DIN Condensed', sans-serif;
      font-size:18px;
   
    }

    input[type="number"] {
      background-color: #ffffff;
      color: #000000;
      border: 1px solid #444;
      border-radius: 4px;
      width: 100px;
    }

    .button-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
    }

    button {
      background: linear-gradient(135deg, #b3c618, #b3c618);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1.5rem;
      cursor: pointer;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
.button-menu {
  font-family: 'DIN Condensed', sans-serif;
  background: linear-gradient(135deg, #b3c618, #b3c618);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
padding: 30px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

    .btn-jeu {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: linear-gradient(135deg, #b3c618, #b3c618);
        color: white;
        border: none;
        padding: 14px 28px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        user-select: none;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 1000;
    }
    .btn-jeu:hover {
        background: linear-gradient(135deg, #9eaa15, #9eaa15);
        box-shadow: 0 8px 20px #9eaa15;
    }
/* Table container */
    .table-wrapper {
        width: 100%;
        max-width: 900px;
        overflow-x: auto;
        border-radius: 18px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9);
        background: rgba(255 255 255 / 0.05);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 18px;
        overflow: hidden;
        color: #000000;
    }

    thead tr {
        background: #b3c618;
        color: #f0f8ff;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        user-select: none;
    }

    th, td {
        padding: 16px 28px;
        text-align: left;
        font-size: 1rem;
        white-space: nowrap;
    }
  td[data-label="code"] {
    font-weight: bold;
    font-size: 1.5em;
    letter-spacing: 4px; /* espace entre les signes */
    color: #2c3e50;      /* couleur plus sombre, modifiable */
  }

    tbody tr {
        border-bottom: 1px solid rgba(255 255 255 / 0.12);
        transition: background-color 0.3s ease, color 0.3s ease;
        cursor: default;
    }
    tbody tr:nth-child(odd) {
        background: #C2C2C2;
    }


    /* Responsive Desktop/Tablet */
    @media (max-width: 900px) {
        th, td {
            padding: 12px 18px;
            font-size: 0.95rem;
        }
        h1 {
            font-size: 2.4rem;
        }
    }

    /* Mobile styles: transform table into card list */
    @media (max-width: 600px) {
        body-liste {
            padding: 20px 10px 70px;
        }

        h1 {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        .table-wrapper {
            box-shadow: none;
            background: transparent;
            overflow-x: visible;
        }

        table, thead, tbody, th, td, tr {
            display: block;
            width: 100%;
            border: none;
            background: none;
            color: #000000;
        }

        thead tr {
            display: none; /* Hide headers */
        }

        tbody tr {
            margin-bottom: 16px;
            padding: 16px 20px;
            background: #f0f0f0;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
            cursor: default;
            transition: background-color 0.3s ease;
        }


        tbody tr td {
            padding: 6px 0;
            white-space: normal;
            font-size: 1rem;
            border: none;
        }

        tbody tr td::before {
            content: attr(data-label);
            float: left;
            font-weight: 700;
            text-transform: uppercase;
            color: #000000;
            user-select: none;
            width: 110px;
        }
    }

  </style>