/* =====================================================
   Morse Trainer v3.0 — Feuille de style complète
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variables ── */
#morse-trainer {
  --mt-bg:       #0d1117;
  --mt-surface:  #161b22;
  --mt-border:   #30363d;
  --mt-accent:   #f0a500;
  --mt-accent2:  #58a6ff;
  --mt-text:     #e6edf3;
  --mt-muted:    #7d8590;
  --mt-success:  #3fb950;
  --mt-error:    #f85149;
  --mt-radius:   10px;
  --mt-mono:     'Courier Prime', 'Courier New', monospace;
  --mt-ui:       'DM Sans', system-ui, sans-serif;

  all:           initial;
  display:       block;
  box-sizing:    border-box;
  background:    var(--mt-bg);
  color:         var(--mt-text);
  font-family:   var(--mt-ui);
  font-size:     15px;
  line-height:   1.5;
  border-radius: var(--mt-radius);
  border:        1px solid var(--mt-border);
  max-width:     920px;
  margin:        2rem auto;
  overflow:      hidden;
  position:      relative; /* pour les toasts */
}
#morse-trainer *, #morse-trainer *::before, #morse-trainer *::after { box-sizing: border-box; }

/* ── Login notice ── */
#mt-login-notice {
  background: #161b22; border: 1px solid #f85149; color: #e6edf3;
  padding: 1rem 1.4rem; border-radius: 8px; max-width: 480px;
  margin: 2rem auto; font-family: system-ui, sans-serif;
}
#mt-login-notice a { color: #58a6ff; }

/* ── Header ── */
.mt-header {
  background: var(--mt-surface); border-bottom: 1px solid var(--mt-border);
  padding: 1rem 1.4rem; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.mt-title {
  margin: 0; padding: 0; font-family: var(--mt-mono); font-size: 1.15rem;
  font-weight: 700; color: var(--mt-accent); letter-spacing: .04em;
  border: none; background: none;
}
.mt-title span { color: var(--mt-muted); font-weight: 400; }
.mt-user-badge { font-size: .82rem; color: var(--mt-muted); display: flex; align-items: center; gap: .35rem; }
.mt-user-badge strong { color: var(--mt-accent2); }

/* ── Tabs ── */
.mt-tabs {
  display: flex; background: var(--mt-surface);
  border-bottom: 1px solid var(--mt-border);
  overflow-x: auto; scrollbar-width: none;
}
.mt-tabs::-webkit-scrollbar { display: none; }
.mt-tab {
  flex: 0 0 auto; padding: .65rem .7rem; text-align: center; cursor: pointer;
  font-family: var(--mt-ui); font-size: .8rem; font-weight: 500;
  color: var(--mt-muted); border: none; border-bottom: 2px solid transparent;
  background: transparent; transition: color .15s, border-color .15s; white-space: nowrap;
}
.mt-tab:hover  { color: var(--mt-text); }
.mt-tab.active { color: var(--mt-accent); border-bottom-color: var(--mt-accent); }

/* ── Panels ── */
.mt-panel        { display: none; padding: 1.4rem; }
.mt-panel.active { display: block; }

/* ── Progress bar (Koch) ── */
.mt-lesson-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem;
}
.mt-lesson-header h3 {
  margin: 0; padding: 0; font-size: .95rem; font-weight: 600;
  color: var(--mt-text); border: none; background: none;
}
.mt-progress-bar-wrap {
  flex: 1; max-width: 240px; background: var(--mt-border);
  border-radius: 99px; height: 7px; overflow: hidden;
}
.mt-progress-bar-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg,var(--mt-accent2),var(--mt-accent));
  border-radius: 99px; transition: width .5s ease;
}
.mt-progress-label { font-size: .8rem; color: var(--mt-muted); white-space: nowrap; }

/* ── Grille Koch ── */
.mt-koch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(60px,1fr));
  gap: .45rem; margin-bottom: 1.2rem;
}
.mt-koch-cell {
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: 6px; padding: .5rem .3rem; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.mt-koch-cell .char        { display: block; font-family: var(--mt-mono); font-size: 1.2rem; font-weight: 700; color: var(--mt-muted); }
.mt-koch-cell .morse-code  { display: block; font-family: var(--mt-mono); font-size: .65rem; color: var(--mt-muted); letter-spacing: .08em; margin-top: .1rem; }
.mt-koch-cell.unlocked .char       { color: var(--mt-text); }
.mt-koch-cell.unlocked .morse-code { color: var(--mt-accent); }
.mt-koch-cell.unlocked             { border-color: var(--mt-accent2); }
.mt-koch-cell.current              { background: #1c2d40; border-color: var(--mt-accent); box-shadow: 0 0 10px rgba(240,165,0,.2); }
.mt-koch-cell.current .char        { color: var(--mt-accent); }

/* ── Contrôles sliders ── */
.mt-controls {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
  gap: 1rem; margin-bottom: 1.2rem;
}
.mt-field label      { display: block; font-size: .8rem; color: var(--mt-muted); margin-bottom: .3rem; }
.mt-range-val        { color: var(--mt-accent2); font-family: var(--mt-mono); }
.mt-field input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--mt-border); border-radius: 99px; outline: none; cursor: pointer;
}
.mt-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mt-accent); cursor: pointer; box-shadow: 0 0 5px rgba(240,165,0,.4);
}
.mt-field input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background: var(--mt-accent); cursor: pointer;
}

/* ── Boutons ── */
.mt-btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .65rem 1.1rem;
  min-height: 48px;
  border: 1px solid transparent; border-radius: 8px;
  font-family: var(--mt-ui); font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .1s;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.mt-btn:active { transform: scale(.96); }
.mt-btn-primary   { background: var(--mt-accent); color: #0d0d0d; }
.mt-btn-primary:hover { background: #ffc107; }
.mt-btn-secondary { background: var(--mt-surface); color: var(--mt-text); border-color: var(--mt-border); }
.mt-btn-secondary:hover { border-color: var(--mt-accent2); color: var(--mt-accent2); }
.mt-btn-danger    { background: transparent; color: var(--mt-error); border-color: var(--mt-error); }
.mt-btn-danger:hover { background: rgba(248,81,73,.1); }

/* ── Mode badge ── */
.mt-mode-badge {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  color: var(--mt-accent2); background: rgba(88,166,255,.1); border: 1px solid rgba(88,166,255,.25);
  border-radius: 99px; padding: .18rem .65rem; margin-bottom: .8rem;
  text-transform: uppercase;
}

/* ── Textarea mode personnalisé ── */
#morse-trainer textarea,
#morse-trainer textarea:focus {
  color:       var(--mt-text) !important;
  background:  var(--mt-bg)   !important;
  border:      1px solid var(--mt-border);
  border-radius: 6px;
  font-family: var(--mt-mono);
  font-size:   .95rem;
  padding:     .6rem .8rem;
  width:       100%;
  resize:      vertical;
  outline:     none;
  caret-color: var(--mt-accent);
  -webkit-text-fill-color: var(--mt-text) !important;
}
#morse-trainer textarea:focus {
  border-color: var(--mt-accent2);
}
/* ── Onglets internes Stats (Koch / Textes) ── */
.mt-stats-tabs {
  display:       flex;
  gap:           .5rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--mt-border);
  padding-bottom: .6rem;
}
.mt-stats-tab {
  background:    var(--mt-surface);
  border:        1px solid var(--mt-border);
  border-radius: 6px;
  color:         var(--mt-muted);
  cursor:        pointer;
  font-family:   var(--mt-ui);
  font-size:     .85rem;
  font-weight:   500;
  padding:       .45rem .9rem;
  transition:    all .15s;
}
.mt-stats-tab:hover  { color: var(--mt-text); border-color: var(--mt-accent2); }
.mt-stats-tab.active { color: var(--mt-accent); border-color: var(--mt-accent); background: rgba(240,165,0,.08); }

.mt-stats-view         { display: none; }
.mt-stats-view.active  { display: block; }

/* ── Écran de démarrage exercice ── */
#mt-exercise-start-screen {
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-start-screen-inner { text-align: center; max-width: 340px; }
.mt-start-icon  { font-size: 3rem; margin-bottom: .8rem; }
.mt-start-title { font-size: 1.2rem; font-weight: 700; color: var(--mt-text); margin: 0 0 .5rem; padding:0;border:none;background:none; }
.mt-start-desc  { font-size: .88rem; color: var(--mt-muted); margin: 0 0 1.2rem; padding:0;border:none;background:none; line-height:1.5; }
.mt-start-btn   { font-size: 1rem; padding: .7rem 2rem; margin-bottom: .8rem; width: 100%; }
.mt-start-hint  { font-size: .78rem; color: var(--mt-muted); margin:0;padding:0;border:none;background:none; }
.mt-start-hint strong { color: var(--mt-accent2); }

.mt-exercise-box {
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius); padding: 1.2rem; margin-bottom: 1rem;
}
.mt-seq-display {
  font-family: var(--mt-mono); font-size: 2.3rem; letter-spacing: .22em;
  color: var(--mt-accent); text-align: center; min-height: 3rem;
  margin-bottom: .8rem; word-break: break-all;
}
.mt-seq-display.playing { animation: mt-pulse 1s ease infinite; }
@keyframes mt-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Barre de progression de session */
.mt-progress-session-wrap {
  height: 4px; background: var(--mt-border); border-radius: 99px;
  overflow: hidden; margin-bottom: .8rem;
}
.mt-progress-session-bar {
  height: 100%; width: 0%; background: var(--mt-accent2);
  border-radius: 99px; transition: width .3s;
}

.mt-input-row  { display: flex; gap: .5rem; align-items: center; }
.mt-answer-input {
  flex: 1; background: var(--mt-bg); border: 1px solid var(--mt-border);
  border-radius: 6px; color: var(--mt-text); font-family: var(--mt-mono);
  font-size: 1.2rem; letter-spacing: .18em; padding: .45rem .75rem;
  text-transform: uppercase; outline: none; transition: border-color .2s, background .2s;
}
.mt-answer-input:focus   { border-color: var(--mt-accent2); }
.mt-answer-input.correct { border-color: var(--mt-success); background: rgba(63,185,80,.08); }
.mt-answer-input.wrong   { border-color: var(--mt-error);   background: rgba(248,81,73,.08); }

.mt-feedback {
  min-height: 1.5rem; font-size: .88rem; font-weight: 600; text-align: center;
  margin: .6rem 0 0; padding: 0; border: none; background: none;
}
.mt-feedback.ok   { color: var(--mt-success); }
.mt-feedback.err  { color: var(--mt-error); }
.mt-feedback.info { color: var(--mt-accent2); }

.mt-session-info {
  margin: .8rem 0 0; font-size: .82rem; color: var(--mt-muted);
  padding: 0; border: none; background: none;
}
.mt-session-info strong { color: var(--mt-text); }

/* ── Mode Envoi ── */
.mt-send-intro { margin-bottom: 1.1rem; font-size: .88rem; color: var(--mt-text); }
.mt-send-intro p { margin: 0; }
.mt-send-target-wrap {
  display: flex; align-items: center; gap: .8rem;
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius); padding: .9rem 1.1rem; margin-bottom: .8rem;
}
.mt-send-label { font-size: .8rem; color: var(--mt-muted); flex-shrink: 0; }
.mt-send-target {
  font-family: var(--mt-mono); font-size: 2.2rem; font-weight: 700;
  color: var(--mt-accent); flex: 1; text-align: center; letter-spacing: .1em;
}
.mt-send-box {
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius); padding: 1rem; text-align: center; margin-bottom: .8rem;
}
.mt-send-display {
  font-family: var(--mt-mono); font-size: 1.6rem; letter-spacing: .12em;
  color: var(--mt-text); min-height: 2.4rem;
}
.send-built  { color: var(--mt-accent2); }
.send-cursor { color: var(--mt-accent); }
.blink       { animation: mt-pulse 1s step-end infinite; }
.mt-send-morse-raw {
  font-family: var(--mt-mono); font-size: 1.1rem; color: var(--mt-muted);
  letter-spacing: .2em; margin-top: .4rem;
}
.mt-btn-paddle {
  font-size: 1.1rem; padding: .8rem 2rem;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.mt-send-stats {
  display: flex; gap: 1.5rem; justify-content: center;
  font-size: .84rem; color: var(--mt-muted); margin-top: .8rem;
}
.mt-send-stats strong { color: var(--mt-text); }

/* ── Mode Textes ── */
.mt-text-categories {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem;
}
.mt-cat-btn {
  padding: .35rem .8rem; border-radius: 99px; font-size: .82rem; font-weight: 500;
  cursor: pointer; background: var(--mt-surface); border: 1px solid var(--mt-border);
  color: var(--mt-muted); transition: all .15s;
}
.mt-cat-btn:hover  { border-color: var(--mt-accent2); color: var(--mt-accent2); }
.mt-cat-btn.active { background: rgba(88,166,255,.12); border-color: var(--mt-accent2); color: var(--mt-accent2); font-weight: 600; }
.mt-custom-textarea {
  width: 100%; background: var(--mt-bg); border: 1px solid var(--mt-border);
  border-radius: 6px; color: var(--mt-text); font-family: var(--mt-mono); font-size: .9rem;
  padding: .6rem .8rem; resize: vertical; outline: none;
}
.mt-custom-textarea:focus { border-color: var(--mt-accent2); }

/* ── Stats ── */
.mt-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
  gap: .75rem; margin-bottom: 1.3rem;
}
.mt-stat-card { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-radius); padding: .9rem .7rem; text-align: center; }
.mt-stat-card .val { display: block; font-family: var(--mt-mono); font-size: 1.65rem; font-weight: 700; color: var(--mt-accent); }
.mt-stat-card .lbl { display: block; font-size: .75rem; color: var(--mt-muted); margin-top: .2rem; }

.mt-section-title {
  font-size: .88rem; color: var(--mt-muted); font-weight: 500;
  margin: .4rem 0 .75rem; padding: 0; border: none; background: none;
}
.mt-table-wrap { overflow-x: auto; }
.mt-sessions-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mt-sessions-table th { text-align: left; padding: .45rem .6rem; color: var(--mt-muted); border-bottom: 1px solid var(--mt-border); font-weight: 500; white-space: nowrap; }
.mt-sessions-table td { padding: .45rem .6rem; border-bottom: 1px solid rgba(48,54,61,.5); }
.mt-sessions-table tr:hover td { background: var(--mt-surface); }
.mt-empty { color: var(--mt-muted); text-align: center; }
.acc-hi  { color: var(--mt-success); font-weight: 600; }
.acc-mid { color: var(--mt-accent);  font-weight: 600; }
.acc-lo  { color: var(--mt-error);   font-weight: 600; }

/* ── Graphique ── */
.mt-chart-wrap {
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius); padding: 1rem 1rem .6rem; margin-bottom: 1.3rem;
}
.mt-chart-legend { display: flex; gap: 1.2rem; margin-bottom: .7rem; }
.mt-legend-item { font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.mt-legend-item::before { content: ''; display: inline-block; width: 24px; height: 3px; border-radius: 99px; }
.mt-legend-acc         { color: var(--mt-accent2); }
.mt-legend-acc::before { background: var(--mt-accent2); }
.mt-legend-wpm         { color: var(--mt-accent); }
.mt-legend-wpm::before { background: var(--mt-accent); }
.mt-chart-container { position: relative; }
#mt-progress-chart   { width: 100% !important; display: block; border-radius: 4px; }
.mt-chart-empty { display: none; text-align: center; color: var(--mt-muted); font-size: .85rem; padding: 2.5rem 0; margin: 0; border: none; background: none; }
.mt-chart-empty.visible { display: block; }
#mt-progress-chart.hidden { display: none; }
.mt-chart-tooltip {
  position: absolute; background: var(--mt-bg); border: 1px solid var(--mt-border);
  border-radius: 6px; padding: .4rem .65rem; font-size: .78rem; color: var(--mt-text);
  pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .15s; z-index: 10;
}
.mt-chart-tooltip.visible { opacity: 1; }
.tt-acc { color: var(--mt-accent2); font-weight: 600; }
.tt-wpm { color: var(--mt-accent);  font-weight: 600; }

/* ── Badges ── */
.mt-badges-intro { font-size: .85rem; color: var(--mt-muted); margin: 0 0 1rem; }
.mt-badges-grid  {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: .7rem;
}
.mt-badge-card {
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius); padding: 1rem .8rem; text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.mt-badge-card.earned {
  border-color: var(--mt-accent); box-shadow: 0 0 12px rgba(240,165,0,.18);
}
.mt-badge-card.locked { opacity: .45; }
.badge-icon   { font-size: 2rem; margin-bottom: .4rem; }
.badge-name   { font-size: .84rem; font-weight: 600; color: var(--mt-text); margin-bottom: .25rem; }
.badge-desc   { font-size: .72rem; color: var(--mt-muted); line-height: 1.4; margin-bottom: .4rem; }
.badge-status { font-size: .72rem; font-weight: 600; color: var(--mt-success); }
.locked-lbl   { color: var(--mt-muted) !important; }

/* ── Scores ── */
.mt-scores-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .2rem; flex-wrap: wrap; gap: .5rem;
}
.mt-my-row td { background: rgba(240,165,0,.06) !important; }
.mt-you-badge {
  display: inline-block; font-size: .68rem; background: var(--mt-accent);
  color: #0d0d0d; border-radius: 99px; padding: .05rem .35rem;
  font-weight: 700; vertical-align: middle; margin-left: .2rem;
}

/* ── Réglages ── */
.mt-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 1rem;
}
.mt-settings-card {
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius); padding: 1.1rem;
}
.mt-settings-card-title {
  font-size: .9rem; font-weight: 600; color: var(--mt-accent2);
  margin: 0 0 .9rem; padding: 0; border: none; background: none;
}
.mt-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .85rem; gap: .5rem;
}
.mt-toggle-label { font-size: .82rem; color: var(--mt-text); flex: 1; }
.mt-toggle { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.mt-toggle input { opacity: 0; width: 0; height: 0; }
.mt-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--mt-border); border-radius: 99px; transition: background .2s;
}
.mt-toggle-slider::before {
  content: ''; position: absolute; height: 15px; width: 15px;
  left: 3px; bottom: 3px; background: var(--mt-muted);
  border-radius: 50%; transition: transform .2s, background .2s;
}
.mt-toggle input:checked + .mt-toggle-slider { background: rgba(240,165,0,.3); }
.mt-toggle input:checked + .mt-toggle-slider::before { transform: translateX(17px); background: var(--mt-accent); }

/* ── Toast notifications ── */
.mt-toast {
  position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--mt-surface); border: 1px solid var(--mt-accent);
  color: var(--mt-text); border-radius: 8px; padding: .55rem 1.1rem;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .3s, transform .3s; z-index: 100;
  pointer-events: none;
}
.mt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Footer ── */
.mt-footer {
  background: var(--mt-surface); border-top: 1px solid var(--mt-border);
  padding: .6rem 1.2rem; display: flex; align-items: center;
  justify-content: space-between; font-size: .76rem; color: var(--mt-muted);
}
.mt-save-status { display: flex; align-items: center; gap: .4rem; }
.mt-save-dot    { width: 7px; height: 7px; border-radius: 50%; background: var(--mt-muted); flex-shrink: 0; }
.mt-save-dot.saving { background: var(--mt-accent); animation: mt-pulse .8s infinite; }
.mt-save-dot.saved  { background: var(--mt-success); animation: none; }
.mt-save-dot.error  { background: var(--mt-error);   animation: none; }

kbd {
  background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: 4px; padding: .1rem .35rem;
  font-family: var(--mt-mono); font-size: .8rem; color: var(--mt-accent2);
}

/* ══════════════════════════════════════════════
   THÈME CLAIR
══════════════════════════════════════════════ */
#morse-trainer.theme-light {
  --mt-bg:      #f6f8fa;
  --mt-surface: #ffffff;
  --mt-border:  #d0d7de;
  --mt-text:    #1f2328;
  --mt-muted:   #656d76;
  --mt-accent:  #d08000;
  --mt-accent2: #0969da;
  --mt-success: #1a7f37;
  --mt-error:   #cf222e;
}

/* Bouton toggle thème */
.mt-btn-theme {
  background:    transparent;
  border:        1px solid var(--mt-border);
  border-radius: 6px;
  cursor:        pointer;
  font-size:     1.1rem;
  line-height:   1;
  padding:       .3rem .5rem;
  transition:    background .15s;
}
.mt-btn-theme:hover { background: var(--mt-surface); }

/* ══════════════════════════════════════════════
   CHRONOMÈTRE
══════════════════════════════════════════════ */
.mt-chrono {
  font-family:  var(--mt-mono);
  font-size:    .9rem;
  font-weight:  700;
  color:        var(--mt-accent2);
  letter-spacing:.05em;
  min-width:    3rem;
  text-align:   right;
}

/* ══════════════════════════════════════════════
   BOUTON TAP MOBILE
══════════════════════════════════════════════ */
.mt-tap-btn {
  display:       none; /* affiché uniquement sur mobile via JS */
  width:         100%;
  margin-top:    .8rem;
  padding:       1rem;
  background:    var(--mt-accent);
  color:         #0d0d0d;
  border:        none;
  border-radius: 8px;
  font-family:   var(--mt-ui);
  font-size:     1rem;
  font-weight:   700;
  cursor:        pointer;
  letter-spacing:.04em;
  transition:    background .15s, transform .1s;
}
.mt-tap-btn:active { transform: scale(.97); background: #ffc107; }
.mt-tap-btn.visible { display: block; }

/* ══════════════════════════════════════════════
   STREAK
══════════════════════════════════════════════ */
.mt-streak-banner {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  background:    linear-gradient(135deg, rgba(240,165,0,.12), rgba(240,165,0,.04));
  border:        1px solid rgba(240,165,0,.3);
  border-radius: var(--mt-radius);
  padding:       .7rem 1rem;
  margin-bottom: 1rem;
  font-size:     .95rem;
  font-weight:   600;
  color:         var(--mt-accent);
}
.mt-streak-fire { font-size: 1.3rem; }
.mt-streak-sub  { font-size: .78rem; color: var(--mt-muted); font-weight: 400; margin-left: auto; }
.mt-streak-banner.streak-zero {
  background: var(--mt-surface);
  border-color: var(--mt-border);
  color: var(--mt-muted);
}

/* ══════════════════════════════════════════════
   HEATMAP PRÉCISION PAR CARACTÈRE
══════════════════════════════════════════════ */
.mt-heatmap-wrap {
  background:    var(--mt-surface);
  border:        1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  padding:       .9rem;
  margin-bottom: 1.2rem;
}
.mt-heatmap {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap:                   .35rem;
}
.mt-hm-cell {
  border-radius: 5px;
  padding:       .4rem .2rem;
  text-align:    center;
  font-size:     .7rem;
  line-height:   1.3;
  border:        1px solid transparent;
}
.mt-hm-cell .hm-char {
  display:     block;
  font-family: var(--mt-mono);
  font-size:   1rem;
  font-weight: 700;
}
.mt-hm-cell .hm-pct  { display: block; font-size: .68rem; }
.mt-hm-cell .hm-count{ display: block; font-size: .6rem; opacity: .7; }

/* Couleurs selon précision */
.mt-hm-cell.hm-none { background: var(--mt-surface); border-color: var(--mt-border); color: var(--mt-muted); }
.mt-hm-cell.hm-lo   { background: rgba(248,81,73,.18); border-color: rgba(248,81,73,.35); color: #f85149; }
.mt-hm-cell.hm-mid  { background: rgba(240,165,0,.18); border-color: rgba(240,165,0,.35); color: #f0a500; }
.mt-hm-cell.hm-hi   { background: rgba(63,185,80,.18); border-color: rgba(63,185,80,.35); color: #3fb950; }

.mt-heatmap-empty {
  display:    none;
  text-align: center;
  color:      var(--mt-muted);
  font-size:  .85rem;
  padding:    1rem 0;
  margin:     0; border: none; background: none;
}
.mt-heatmap-empty.visible { display: block; }

/* Légende heatmap */
.mt-hm-legend {
  display:    flex;
  gap:        1rem;
  margin-top: .6rem;
  font-size:  .75rem;
  color:      var(--mt-muted);
  flex-wrap:  wrap;
}
.mt-hm-legend span { display: flex; align-items: center; gap: .3rem; }
.mt-hm-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mt-hm-dot.lo  { background: rgba(248,81,73,.5); }
.mt-hm-dot.mid { background: rgba(240,165,0,.5); }
.mt-hm-dot.hi  { background: rgba(63,185,80,.5); }

/* ══════════════════════════════════════════════
   PAGE DÉMO
══════════════════════════════════════════════ */
#mt-demo {
  all: initial;
  display: block;
  box-sizing: border-box;
  background:    var(--mt-bg);
  color:         var(--mt-text);
  font-family:   var(--mt-ui);
  font-size:     15px;
  line-height:   1.5;
  border-radius: var(--mt-radius);
  border:        1px solid var(--mt-border);
  max-width:     880px;
  margin:        2rem auto;
  overflow:      hidden;
}
#mt-demo *, #mt-demo *::before, #mt-demo *::after { box-sizing: border-box; }

/* Réutilise les variables de #morse-trainer */
#mt-demo {
  --mt-bg:       #0d1117;
  --mt-surface:  #161b22;
  --mt-border:   #30363d;
  --mt-accent:   #f0a500;
  --mt-accent2:  #58a6ff;
  --mt-text:     #e6edf3;
  --mt-muted:    #7d8590;
  --mt-success:  #3fb950;
  --mt-error:    #f85149;
  --mt-radius:   10px;
  --mt-mono:     'Courier Prime', 'Courier New', monospace;
  --mt-ui:       'DM Sans', system-ui, sans-serif;
}

.mt-demo-header {
  background:    var(--mt-surface);
  border-bottom: 1px solid var(--mt-border);
  padding:       1.2rem 1.4rem;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           1rem;
}
.mt-demo-tagline {
  font-size: .85rem;
  color:     var(--mt-muted);
  margin:    .2rem 0 0;
  padding:   0; border: none; background: none;
}
.mt-demo-cta {
  white-space:   nowrap;
  text-decoration: none;
  font-size:     .88rem;
  padding:       .55rem 1.1rem;
}
.mt-demo-intro {
  color:       var(--mt-muted);
  font-size:   .88rem;
  margin:      0 0 1.1rem;
  padding:     0; border: none; background: none;
}

/* Sélecteur de caractères */
.mt-demo-chars {
  display:   flex;
  gap:       .6rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.mt-demo-char-btn {
  background:    var(--mt-surface);
  border:        1px solid var(--mt-border);
  border-radius: 8px;
  padding:       .6rem .9rem;
  cursor:        pointer;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           .15rem;
  transition:    all .15s;
  min-width:     60px;
  font-family:   var(--mt-mono);
}
.mt-demo-char-btn:hover       { border-color: var(--mt-accent2); }
.mt-demo-char-btn.active      { border-color: var(--mt-accent); background: rgba(240,165,0,.1); }
.mt-demo-char-btn .char       { font-size: 1.4rem; font-weight: 700; color: var(--mt-text); }
.mt-demo-char-btn .code       { font-size: .75rem; color: var(--mt-accent); letter-spacing: .1em; }

/* Contrôles démo */
.mt-demo-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1rem;
  margin-bottom: 1.1rem;
}

/* Score démo */
.mt-demo-score {
  font-size: .83rem;
  color:     var(--mt-muted);
  text-align:center;
  margin-top:.6rem;
}
.mt-demo-score strong { color: var(--mt-accent2); }

/* Bannière upgrade */
.mt-demo-upgrade {
  background:    rgba(88,166,255,.07);
  border:        1px solid rgba(88,166,255,.2);
  border-radius: 8px;
  padding:       .8rem 1rem;
  font-size:     .83rem;
  color:         var(--mt-muted);
  margin-top:    1.1rem;
  line-height:   1.6;
}
.mt-demo-upgrade strong { color: var(--mt-text); }
.mt-demo-upgrade a { color: var(--mt-accent2); text-decoration: none; font-weight: 600; }
.mt-demo-upgrade a:hover { text-decoration: underline; }

/* Convertisseur */
.mt-convert-wrap { display: flex; flex-direction: column; gap: .6rem; }
.mt-convert-output {
  background:    var(--mt-surface);
  border:        1px solid var(--mt-border);
  border-radius: 8px;
  padding:       1rem;
  font-family:   var(--mt-mono);
  font-size:     1.1rem;
  letter-spacing:.12em;
  color:         var(--mt-accent);
  min-height:    60px;
  word-break:    break-all;
  line-height:   1.8;
}
.mt-convert-placeholder { color: var(--mt-muted); font-size: .85rem; font-family: var(--mt-ui); letter-spacing: 0; margin: 0; }

/* Benefits liste */
.mt-demo-benefits {
  list-style: none;
  margin:     .6rem 0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:        .4rem .8rem;
}
.mt-demo-benefits li { font-size: .88rem; color: var(--mt-text); }

/* Responsive démo */
@media (max-width: 540px) {
  .mt-demo-header { flex-direction: column; align-items: flex-start; }
  .mt-demo-cta    { width: 100%; text-align: center; }
}

/* ── SRS ── */
.mt-srs-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  background:    rgba(240,165,0,.15);
  border:        1px solid rgba(240,165,0,.4);
  border-radius: 99px;
  color:         var(--mt-accent);
  font-size:     .78rem;
  font-weight:   600;
  padding:       .2rem .65rem;
  animation:     mt-pulse 2s ease infinite;
  cursor:        default;
}
.mt-srs-table .srs-row-due td {
  background: rgba(240,165,0,.06);
}
.srs-due-now {
  color:       var(--mt-accent);
  font-weight: 700;
  font-size:   .82rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .mt-seq-display   { font-size: 1.55rem; }
  .mt-controls      { grid-template-columns: 1fr; }
  .mt-tab           { font-size: .72rem; padding: .6rem .4rem; }
  .mt-btn           { font-size: .8rem; padding: .45rem .75rem; }
  .mt-badges-grid   { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
  .mt-settings-grid { grid-template-columns: 1fr; }
  .mt-tap-btn.visible { display: block; }
}

/* ── iOS clavier virtuel ── */
/* Assure que l'input reste visible au-dessus du clavier */
#morse-trainer .mt-answer-input,
#morse-trainer .mt-text-answer {
  /* Empêche iOS de zoomer sur le champ (nécessite font-size ≥ 16px) */
  font-size: max(16px, 1.1rem);
}
/* Transition douce pour le padding-bottom ajouté par JS (visualViewport) */
#morse-trainer {
  transition: padding-bottom 0.2s ease;
}