/* Auto-extrait depuis games/clavier.html */
    .keyboard-hero {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      text-align: left;
      margin-bottom: 24px;
    }
    .keyboard-hero .page-icon {
      margin: 0;
    }
    .keyboard-hero-copy h1 {
      margin-bottom: 4px;
    }
    .keyboard-hero-copy p {
      margin: 0;
    }

    /* ── Phrase display ── */
    .exercise-zone {
      background:
        radial-gradient(circle at 85% 15%, rgba(94,196,212,0.025), transparent 35%),
        var(--surface);
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 16px;
      margin-bottom: 20px;
    }
    .keyboard-practice {
      box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
    }
    .exercise-phrase {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 17px;
      font-family: 'Courier New', monospace;
      letter-spacing: 0;
      line-height: 1.6;
      margin-bottom: 14px;
      min-height: 60px;
      padding: 12px 14px;
      word-break: break-word;
      overflow-wrap: break-word;
      display: flex;
      align-items: center;
    }
    .char { display: inline; transition: color 0.08s; }
    .char.correct { color: var(--success); }
    .char.wrong   { color: var(--danger); text-decoration: underline; }
    .char.current { background: var(--accent); color: #fff; border-radius: 3px; padding: 0 1px; animation: none; }

    /* ── Input ── */
    #typing-input {
      width: 100%; max-width: 100%; display: block; margin: 0;
      font-family: 'Courier New', monospace;
      font-size: 16px; text-align: left; letter-spacing: 0.5px;
      padding: 12px 14px; border-radius: 10px;
      border: 2px solid var(--border); background: var(--bg2); color: var(--text1);
      outline: none; transition: border-color 0.2s;
    }
    #typing-input:focus   { border-color: var(--accent); }
    #typing-input.correct { border-color: var(--success); }
    #typing-input.wrong   { border-color: var(--danger); animation: shake-input 0.3s ease; }
    @keyframes shake-input { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

    /* Pulse sur le champ tant qu'il n'est pas activé */
    #typing-input.idle {
      animation: none;
    }

    .keyboard-result-details {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      color: var(--text2);
      display: grid;
      gap: 8px;
      font-size: 13px;
      line-height: 1.45;
      margin-top: 12px;
      padding: 14px;
      text-align: left;
    }
    .keyboard-result-details:empty {
      display: none;
    }
    .keyboard-result-details strong {
      color: var(--text);
    }
    .keyboard-result-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    /* ── Virtual keyboard ── */
    .keyboard {
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      overflow-x: auto;
      padding: 10px 0 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg2);
    }
    .keyboard-row { display: flex; gap: 5px; min-width: max-content; padding: 0 8px; }
    .key {
      min-width: 40px; height: 40px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      border-radius: var(--r); border: 1px solid var(--border);
      background: var(--surface); color: var(--text2); font-size: 11px; cursor: default;
      -webkit-user-select: none;
      user-select: none; transition: background 0.1s, transform 0.1s;
      padding: 0 4px; line-height: 1.2;
      position: relative;
    }
    .key.duo { font-size: 10px; }
    .key-top { font-size: 9px; color: var(--text3); line-height: 1; }
    .key-btm { font-size: 11px; color: var(--text2); line-height: 1; }
    /* Caractère AltGr (3e position, comme sur un clavier suisse physique) */
    .key-altgr { position: absolute; top: 2px; left: 3px; font-size: 8px; color: #22c55e; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
    .key.highlight .key-altgr { color: rgba(255,255,255,.85); }
    .key.highlight { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent); }
    .key.highlight .key-top { color: rgba(255,255,255,0.7); }
    /* Shift requis → teinte orange */
    .key.highlight-shift { background: #f97316; box-shadow: 0 0 0 2px color-mix(in srgb,#f97316 22%,transparent); }
    /* AltGr requis → teinte violette */
    .key.highlight-altgr { background: #8b5cf6; box-shadow: 0 0 0 2px color-mix(in srgb,#8b5cf6 22%,transparent); }
    /* Touche morte → teinte cyan */
    .key.highlight-dead  { background: #06b6d4; box-shadow: 0 0 0 2px color-mix(in srgb,#06b6d4 22%,transparent); }
    .key.pressed   { background: var(--success); color: #fff; transform: scale(0.9); }
    .key.error     { background: var(--danger);  color: #fff; transform: scale(0.9); }
    .wide-1 { min-width: 52px; }
    .wide-2 { min-width: 70px; }
    .wide-3 { min-width: 80px; }
    .space-key { min-width: 220px; }

    /* ── Touches hors bloc alphanumérique (fonction, navigation, pavé
     * numérique) : affichées pour montrer un clavier complet, sans rôle
     * dans cet exercice (non cliquables, jamais mises en évidence). */
    .key.legend-only { color: var(--text3); opacity: .75; }
    .keyboard-wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: center; }
    .function-row { margin-bottom: 6px; }
    .function-row .key { min-width: 32px; height: 28px; font-size: 10px; }
    .function-row .key.fn-esc, .function-row .key.fn-gap { margin-right: 10px; }
    .keyboard-side { display: flex; flex-direction: column; gap: 10px; padding-top: 34px; }
    .nav-cluster, .numpad-grid { border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); padding: 8px; }
    .nav-cluster { display: flex; flex-direction: column; gap: 8px; }
    .nav-grid, .arrow-grid { display: grid; grid-template-columns: repeat(3, 44px); gap: 5px; }
    .arrow-grid { grid-template-rows: repeat(2, 34px); }
    .nav-grid .key, .arrow-grid .key { min-width: 44px; height: 34px; font-size: 9px; }
    .numpad-grid { display: grid; grid-template-columns: repeat(4, 44px); grid-auto-rows: 34px; gap: 5px; }
    .numpad-grid .key { min-width: 44px; height: 34px; }
    .numpad-grid .num-plus, .numpad-grid .num-enter { grid-row: span 2; height: auto; }
    .numpad-grid .num-zero { grid-column: span 2; width: auto; }

    /* ── WPM live ── */
    #wpm-live { font-size: 12px; color: var(--text3); margin-top: 6px; text-align: center; min-height: 18px; }

    /* ── Shift hint ── */
    #shift-hint { font-size: 12px; color: var(--text3); text-align: center; margin-top: 6px; min-height: 16px; }

    /* ── Result ring ── */
    .result-ring-wrap { display: flex; justify-content: center; margin: 8px 0 16px; }
    .result-ring { position: relative; width: 90px; height: 90px; }
    .result-ring svg { transform: rotate(-90deg); }
    .result-ring circle { fill: none; stroke-width: 8; }
    .result-ring .bg  { stroke: var(--border); }
    .result-ring .arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1s ease; }
    .result-ring .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--accent); }

    /* ── Layout une colonne : exercice puis clavier ── */
    @media (min-width: 700px) {
      .container .page-header h1 { font-size: 22px; margin: 0; }
      .container .page-header p  { font-size: 13px; margin: 0; }
    }

    @media (min-width: 1200px) {
      .exercise-phrase {
        font-size: 20px;
      }
      #typing-input {
        font-size: 18px;
      }
    }

    @media (max-width: 700px) {
      .keyboard-hero {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .keyboard-hero .btn {
        width: 100%;
      }
      .exercise-phrase {
        font-size: 18px;
        letter-spacing: 1px;
        word-break: break-word;
        min-height: 76px;
        padding: 14px;
      }
      #typing-input {
        font-size: 16px;
        max-width: none;
      }
      .keyboard-side { display: none; }
      .function-row { display: none; }
    }