/* ── Fond de page ── */
    body {
      background-color: #0e0e14;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* ── Boîte principale ── */
    .calculatrice {
      background-color: #1a1a26;
      border-radius: 20px;
      padding: 20px;
      width: 300px;
    }

    /* ── Écran ── */
    .ecran {
      background-color: #0e0e14;
      border-radius: 12px;
      padding: 20px;
      text-align: right;
      margin-bottom: 16px;
    }

    .ecran .expression {
      color: #888;
      font-size: 14px;
      min-height: 20px;
      margin-bottom: 6px;
    }

    .ecran .resultat {
      color: white;
      font-size: 36px;
      word-break: break-all;
    }

    /* ── Grille de boutons ── */
    .boutons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    /* ── Style de base d'un bouton ── */
    button {
      height: 65px;
      border: none;
      border-radius: 12px;
      font-size: 20px;
      cursor: pointer;
      background-color: #252535;
      color: white;
      transition: background-color 0.1s;
    }

    button:hover {
      background-color: #2e2e42;
    }

    button:active {
      background-color: #3a3a52;
    }

    /* ── Boutons spéciaux ── */
    .btn-fonction {
      background-color: #1d1d2e;
      color: #aaa;
      font-size: 16px;
    }

    .btn-operateur {
      background-color: #2a2040;
      color: #a78bfa;
      font-size: 22px;
    }

    .btn-egal {
      background-color: #a78bfa;
      color: #0e0e14;
      font-size: 24px;
    }

    .btn-egal:hover {
      background-color: #bfaaff;
    }

    /* Le bouton 0 prend 2 colonnes */
    .btn-zero {
      grid-column: span 2;
      text-align: left;
      padding-left: 24px;
    }