/* Auto-extrait depuis games/retaper.html */
/* === RETAPER SPECIFIQUE === */

.main {
  padding-top: 0 !important;
}

.container {
  padding-top: 0 !important;
}

.page-header {
  margin-top: 18px;
  margin-bottom: 4px;
}

.page-header .page-icon {
  margin-bottom: 4px;
}

.page-header h1 {
  margin-bottom: 4px;
}

.page-header p {
  margin-bottom: 0;
}

.page-header + * {
  margin-top: 16px;
}

.kpi-grid {
  margin-bottom: 18px;
}

.game-zone {
  margin-top: 0;
}

    .retaper-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .retaper-progress-label { font-size: 13px; color: var(--text2); }
    .retaper-progress-label strong { color: var(--text); }

    .retaper-tools {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn-xs {
      min-height: 30px;
      padding: 5px 10px;
      font-size: 12px;
    }

    .mode-toggle {
      border-color: var(--border);
    }

    /* Boîte de situation/contexte */
    .contexte-box {
      background: rgba(245,158,11,0.07);
      border: 1px solid rgba(245,158,11,0.22);
      border-radius: var(--r-md);
      padding: 10px 14px;
      margin-bottom: 12px;
      font-size: 13px;
      color: var(--warning);
      line-height: 1.5;
    }
    .contexte-label {
      font-weight: 700;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 0.7px;
      margin-bottom: 3px;
      opacity: 0.85;
    }

    .profile-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
      padding: 10px 14px;
    }

    .profile-label {
      color: var(--text3);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .profile-choice-btn {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--text2);
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      min-height: 32px;
      padding: 5px 12px;
    }

    .profile-choice-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .profile-note {
      color: var(--text2);
      flex-basis: 100%;
      font-size: 12px;
      line-height: 1.4;
    }

    /* Objet de l'e-mail */
    .sujet-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 9px 14px;
      margin-bottom: 16px;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .sujet-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text3);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .sujet-value {
      color: var(--text);
      font-weight: 600;
      font-size: 14px;
    }

    .copy-note {
      margin: -6px 0 14px;
      color: var(--text2);
      font-size: 13px;
      line-height: 1.5;
    }

    /* Texte de référence avec coloration en direct */
    .ref-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: var(--text3);
      margin-bottom: 8px;
    }

    .ref-box {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: var(--r-lg);
      padding: 20px 22px;
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.75;
      margin-bottom: 18px;
      white-space: pre-wrap;
      word-break: break-word;
      min-height: 72px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .mobile-ref-reminder {
      display: none;
      background: var(--bg);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: var(--r-md);
      color: var(--text2);
      font-size: 13px;
      line-height: 1.45;
      margin: -6px 0 14px;
      padding: 9px 12px;
      z-index: 4;
    }

    /* États des caractères */
    .ref-char.correct { color: var(--success); }
    .ref-char.wrong {
      color: var(--danger);
      background: rgba(248,113,113,0.14);
      border-radius: 2px;
    }
    .ref-char.current {
      background: var(--accent);
      color: #fff;
      border-radius: 2px;
      animation: none;
    }
    .ref-char.pending { color: var(--text); }

    @keyframes blink-cursor {
      0%, 100% { background: var(--accent); }
      50%       { background: rgba(79,142,247,0.3); }
    }

    /* Indice */
    .hint-box {
      display: none;
      margin-bottom: 14px;
      padding: 10px 14px;
      background: rgba(245,158,11,0.08);
      border: 1px solid rgba(245,158,11,0.25);
      border-radius: var(--r-md);
      font-size: 13px;
      color: var(--warning);
    }
    .hint-box.show { display: block; }

    /* Zone de saisie */
    .typing-area {
      display: block;
      width: 100%;
      box-sizing: border-box;
      min-height: 130px;
      padding: 14px 16px;
      border: 2px solid var(--border);
      border-radius: var(--r-lg);
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.75;
      resize: vertical;
      transition: border-color 0.15s;
    }
    .typing-area:focus {
      outline: none;
      border-color: var(--accent);
    }
    .typing-area.has-error { border-color: var(--danger); }
    .typing-area.perfect   { border-color: var(--success); }
    .typing-area:disabled  { opacity: 0.65; cursor: default; resize: none; }

    /* Statistiques en direct */
    .typing-stats {
      display: flex;
      gap: 16px;
      align-items: center;
      font-size: 13px;
      color: var(--text2);
      margin-top: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .stat-errors-val { color: var(--danger); font-weight: 700; }
    .stat-ok-val     { color: var(--success); font-weight: 700; }

    .typing-guidance {
      min-height: 22px;
      margin: -6px 0 14px;
      color: var(--text2);
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
    }

    .diff-panel {
      display: none;
      margin: 0 0 18px;
      padding: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      text-align: left;
    }
    .diff-panel.show { display: block; }
    .diff-title {
      color: var(--text);
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .diff-summary {
      color: var(--text2);
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    .diff-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .diff-label {
      color: var(--text3);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.7px;
      margin-bottom: 6px;
      text-transform: uppercase;
    }
    .diff-text {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      color: var(--text);
      font-size: 13px;
      line-height: 1.75;
      max-height: 220px;
      overflow: auto;
      padding: 12px;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .diff-char.wrong,
    .diff-char.missing {
      background: rgba(248,113,113,0.18);
      color: var(--danger);
    }
    .diff-char.expected {
      background: rgba(52,211,153,0.16);
      color: var(--success);
    }

    @media (min-width: 1200px) {
      .retaper-zone { padding: 40px; }
      .ref-box { font-size: 16px; padding: 24px 28px; }
      .typing-area { font-size: 16px; padding: 16px 20px; }
    }

    @media (max-width: 720px) {
      .retaper-zone { padding: 18px; }
      .retaper-tools {
        justify-content: flex-start;
        width: 100%;
      }
      .sujet-box {
        align-items: flex-start;
        flex-direction: column;
      }
      .profile-box {
        align-items: stretch;
        flex-direction: column;
      }
      .profile-choice-btn {
        width: 100%;
      }
      .ref-box {
        font-size: 14px;
        line-height: 1.65;
        max-height: 42vh;
        overflow: auto;
        padding: 16px;
      }
      .mobile-ref-reminder {
        display: block;
        position: sticky;
        top: 70px;
      }
      .typing-area {
        min-height: 180px;
      }
      .diff-grid {
        grid-template-columns: 1fr;
      }
      .action-row .btn {
        width: 100%;
        justify-content: center;
      }
    }