body {
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      text-align: center;
      margin: 30px;
      background: #f9fafb;
      color: #111827;
  }

  h1 {
      font-size: 1.8em;
      margin-bottom: 20px;
      color: #1e3a8a;
  }

  #expression {
      font-size: 2.2em;
      margin: 25px auto;
      padding: 15px 25px;
      display: none;
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  }

  #answerBtns button,
  #nextBtn,
  #levelBtns button,
  #startLevelBtn {
      margin: 10px;
      padding: 12px 24px;
      font-size: 1.1em;
      cursor: pointer;
      border-radius: 8px;
      border: none;
      color: #fff;
      transition: all .2s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  }

  #answerBtns {
      display: none;
  }

  #answerBtns button {
      background: #2563eb;
  }

  #answerBtns button:hover:not(:disabled) {
      background: #1d4ed8;
      transform: translateY(-2px);
  }

  #answerBtns button:disabled {
      opacity: .5;
      cursor: not-allowed;
  }

  #nextBtn {
      background: #10b981;
      display: none;
  }

  #nextBtn:hover {
      background: #059669;
      transform: translateY(-2px);
  }

  #levelBtns button,
  #startLevelBtn {
      background: #2563eb;
  }

  #levelBtns button:hover,
  #startLevelBtn:hover {
      background: #1d4ed8;
      transform: translateY(-2px);
  }

  #feedback {
      display: none;
      margin-top: 20px;
      font-size: 1.6em;
      font-weight: bold;
  }

  #explanation {
      display: none;
      margin-top: 15px;
      font-size: 1.2em;
      font-style: italic;
      color: #374151;
  }

  .op {
      padding: .25em .4em;
      border-radius: 6px;
      transition: background .4s;
      position: relative;
  }

  .step {
      background: #fde68a;
  }

  .final-ok {
      background: #16a34a;
      color: #fff;
  }

  .final-ko {
      background: #dc2626;
      color: #fff;
  }

  .order-num {
      position: absolute;
      top: -.9em;
      right: -.6em;
      font-size: .65em;
      font-weight: bold;
      color: #111827;
      background: #fefefe;
      border: 1px solid #d1d5db;
      border-radius: 50%;
      width: 1.3em;
      height: 1.3em;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  }

  #score {
      margin-top: 20px;
      font-size: 1.4em;
      color: #1f2937;
      font-weight: bold;
      white-space: pre-line;
      display: block;
  }

  /* Écran de sélection */
  #levelSelect {
      display: block;
  }

  #levelInfo {
      margin: 0 12px;
      font-weight: 700;
      font-size: 1.2em;
  }

  #titre-niveau {
      font-size: 1.6em;
      font-weight: 700;
      margin-bottom: 10px;
      color: #0ea5e9;
      /* même bleu que les boutons */
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
  }

  #auteur {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #f5f5f5;
      /* couleur de fond discrète */
      text-align: center;
      padding: 6px 0;
      font-size: 0.9em;
      color: #333;
      border-top: 1px solid #ccc;
  }

  h1 {
      margin: 0;
  }

  #medaille {
      position: fixed;
      right: 0;
      bottom: 30px;
      border: 3px solid black;
      border-radius: 10px;
      animation: fadeOut 2s forwards;
      /* joue une fois, garde le dernier état */
      margin: 10px;
      padding: 5px;

      font-family: 'opendys';
  }

  .op.highlight {
      background-color: yellow;
      border-radius: 4px;
  }

  .exp-step {
      cursor: pointer;
  }

  .exp-step:hover {
      text-decoration: underline;
  }