/* =====================================================
   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 — Thème clair par défaut (sobre, aligné site UFT) ── */
#morse-trainer {
  --mt-bg:       #ffffff;
  --mt-surface:  #f7f8fa;
  --mt-border:   #dfe3e8;
  --mt-accent:   #8a6d3b;   /* bronze UFT, discret */
  --mt-accent2:  #2c5282;   /* bleu ardoise */
  --mt-text:     #24292f;
  --mt-muted:    #6b7280;
  --mt-success:  #1a7f4b;
  --mt-error:    #b42318;
  --mt-radius:   6px;
  --mt-mono:     ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --mt-ui:       system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 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);
  width:         100%;
  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-ui); font-size: 1.05rem;
  font-weight: 600; color: var(--mt-text); letter-spacing: -.01em;
  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 — style segmenté typographique ── */
.mt-tabs {
  display: flex; gap: 2px; background: var(--mt-surface);
  border-bottom: 1px solid var(--mt-border);
  padding: 9px 12px;
  overflow-x: auto; scrollbar-width: none;
}
.mt-tabs::-webkit-scrollbar { display: none; }
.mt-tab {
  flex: 0 0 auto; cursor: pointer;
  padding: .5rem .95rem; border: none; border-radius: 5px;
  background: transparent;
  font-family: var(--mt-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mt-muted);
  transition: background .16s, color .16s, box-shadow .16s;
  white-space: nowrap;
}
.mt-tab svg { display: none; } /* icônes retirées — style typographique */
.mt-tab:hover { color: var(--mt-text); background: rgba(0,0,0,.035); }
.mt-tab.active {
  background: var(--mt-bg); color: #1a3a5c;
  box-shadow: 0 1px 2px rgba(16,24,40,.09), 0 0 0 1px rgba(16,24,40,.055);
}
.mt-tab.active::after {
  content: ''; display: block; height: 2px; width: 20px;
  margin: 5px auto -2px; background: var(--mt-accent); border-radius: 1px;
}
/* Thème sombre — ajustements */
#morse-trainer.theme-dark .mt-tab:hover { background: rgba(255,255,255,.04); }
#morse-trainer.theme-dark .mt-tab.active {
  background: var(--mt-bg); color: var(--mt-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}

/* ── 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 { cursor: pointer; border-color: var(--mt-accent2); }
.mt-koch-cell.current  { cursor: pointer; }
.mt-koch-cell.playing  {
    background: rgba(240,165,0,.25);
    border-color: var(--mt-accent) !important;
    transform: scale(1.08);
    transition: transform .1s;
}
.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: .4rem;
  padding: .6rem 1rem;
  min-height: 44px;
  border: 1px solid transparent; border-radius: var(--mt-radius);
  font-family: var(--mt-ui); font-size: .88rem; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.mt-btn:active { opacity: .85; }
.mt-btn-primary   { background: var(--mt-accent2); color: #fff; }
.mt-btn-primary:hover { background: #23415f; }
.mt-btn-secondary { background: var(--mt-bg); 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-border); }
.mt-btn-danger:hover { border-color: var(--mt-error); background: rgba(180,35,24,.06); }

/* ── Mode badge ── */
.mt-mode-badge {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--mt-accent2); background: var(--mt-surface); border: 1px solid var(--mt-border);
  border-radius: 4px; padding: .18rem .55rem; 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
══════════════════════════════════════════════ */
/* ── Thème sombre — anthracite chaud, quasi-monochrome ── */
#morse-trainer.theme-dark {
  --mt-bg:      #191817;
  --mt-surface: #211f1e;
  --mt-border:  #322f2d;
  --mt-text:    #e8e4de;
  --mt-muted:   #8d8781;
  --mt-accent:  #b8935a;   /* bronze mat — seul accent */
  --mt-accent2: #b8935a;   /* identique : pas de second accent coloré */
  --mt-success: #7d9471;
  --mt-error:   #b5726a;
}
/* Boutons primaires — bronze mat, texte sombre */
#morse-trainer.theme-dark .mt-btn-primary {
  background: var(--mt-accent); color: #191817; font-weight: 600;
}
#morse-trainer.theme-dark .mt-btn-primary:hover { background: #c9a468; }
#morse-trainer.theme-dark .mt-btn-secondary:hover {
  border-color: var(--mt-accent); color: var(--mt-accent);
}
#morse-trainer.theme-dark .mt-chat-input-mode.active {
  background: var(--mt-accent); color: #191817; font-weight: 600;
}

/* 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;
}

/* Chronometre en pause — clignotement discret */
.mt-chrono.mt-chrono-paused {
  color:      var(--mt-muted);
  animation:  mt-chrono-blink 1.4s ease-in-out infinite;
}
@keyframes mt-chrono-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Bandeau "seance en pause" */
.mt-paused-notice {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            .5rem;
  margin:         .6rem 0 0;
  padding:        .55rem .7rem;
  background:     rgba(240, 165, 0, .12);
  border:         1px dashed var(--mt-accent);
  border-radius:  8px;
  color:          var(--mt-accent);
  font-size:      .84rem;
  font-weight:    600;
  text-align:     center;
}

/* Elements neutralises pendant la pause */
.mt-pause-locked {
  opacity:        .45 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mt-chrono.mt-chrono-paused { animation: none; }
}

/* ══════════════════════════════════════════════
   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); }

/* ══════════════════════════════════════════════
   MODE VISITEUR (non connecté)
   Aucune palette propre : on hérite de celle de #morse-trainer
   pour que la version libre et la version membre soient identiques.
══════════════════════════════════════════════ */

/* En-tête */
.mt-join-btn  { text-decoration: none; white-space: nowrap; font-size: .82rem; padding: .35rem .8rem; }
.mt-login-btn { white-space: nowrap; font-size: .82rem; padding: .35rem .8rem; }

/* Bouton d'installation, visible directement dans l'en-tête */
.mt-install-btn {
  white-space:   nowrap;
  font-size:     .82rem;
  padding:       .35rem .8rem;
  border-color:  var(--mt-accent);
  color:         var(--mt-accent);
}
@media (max-width: 540px) {
  .mt-install-btn { font-size: .76rem; padding: .3rem .6rem; }
}

/* Onglets réservés */
.mt-tab-locked        { opacity: .55; }
.mt-tab-locked:hover  { opacity: .8; }

/* Panneau présenté à la place d'un onglet réservé */
.mt-locked-card {
  max-width:     560px;
  margin:        1.5rem auto;
  padding:       1.4rem;
  background:    var(--mt-surface);
  border:        1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  text-align:    center;
}
.mt-locked-card h3 { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--mt-text); }
.mt-locked-card p  { margin: 0 0 .9rem; font-size: .88rem; color: var(--mt-muted); line-height: 1.55; }
.mt-locked-list {
  list-style: none;
  margin:     0 0 1.2rem;
  padding:    0;
  display:    grid;
  gap:        .45rem;
  text-align: left;
}
.mt-locked-list li {
  font-size:    .85rem;
  color:        var(--mt-text);
  padding-left: 1.3rem;
  position:     relative;
}
.mt-locked-list li::before {
  content:  '✓';
  position: absolute;
  left:     0;
  color:    var(--mt-accent);
  font-weight: 700;
}
.mt-locked-actions {
  display:         flex;
  gap:             .6rem;
  justify-content: center;
  flex-wrap:       wrap;
}
.mt-locked-actions .mt-btn { text-decoration: none; }

/* Choix libre de la leçon */
.mt-guest-lesson      { margin-top: .4rem; }
.mt-guest-lesson-hint {
  margin:    .4rem 0 0;
  font-size: .78rem;
  color:     var(--mt-muted);
  line-height: 1.45;
}

/* Rappel d'adhésion au-dessus du pied de page */
.mt-guest-cta {
  padding:    .7rem 1.4rem;
  background: var(--mt-surface);
  border-top: 1px solid var(--mt-border);
  font-size:  .82rem;
  color:      var(--mt-muted);
  text-align: center;
}
.mt-guest-cta strong { color: var(--mt-text); }
.mt-guest-cta a {
  color:           var(--mt-accent);
  text-decoration: none;
  font-weight:     600;
  margin-left:     .3rem;
}
.mt-guest-cta a:hover { text-decoration: underline; }

/* Formulaire de connexion intégré */
.mt-login-wrap {
  padding:    1rem 1.4rem 1.4rem;
  background: var(--mt-surface);
  border-bottom: 1px solid var(--mt-border);
}
.mt-login-title  { margin: 0 0 .8rem; font-size: .95rem; color: var(--mt-text); font-family: var(--mt-ui); }
.mt-login-error {
  background:    rgba(180,35,24,.12);
  border:        1px solid var(--mt-error);
  border-radius: 6px;
  padding:       .5rem .8rem;
  font-size:     .82rem;
  color:         var(--mt-error);
  margin-bottom: .7rem;
}
.mt-login-fields { display: flex; flex-direction: column; gap: .6rem; max-width: 380px; }
.mt-login-input {
  padding:       .6rem .8rem;
  border:        1px solid var(--mt-border);
  border-radius: 6px;
  background:    var(--mt-bg);
  color:         var(--mt-text);
  font-size:     .9rem;
  font-family:   var(--mt-ui);
  outline:       none;
}
.mt-login-input:focus { border-color: var(--mt-accent); }
.mt-login-remember { display: flex; align-items: center; gap: .5rem; }
.mt-login-remember label { font-size: .82rem; color: var(--mt-muted); cursor: pointer; }
.mt-login-remember input { width: 16px; height: 16px; cursor: pointer; }
.mt-login-lost { font-size: .78rem; color: var(--mt-muted); text-align: center; text-decoration: none; }

@media (max-width: 540px) {
  .mt-join-btn, .mt-login-btn { flex: 1 1 auto; text-align: center; }
  .mt-locked-actions .mt-btn  { width: 100%; }
}

/* ── 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;
}

/* ── Calendrier d'activité ── */
.mt-calendar-wrap { user-select:none; }
.mt-cal-months    { display:flex; margin-left:22px; margin-bottom:2px; overflow:hidden; }
.mt-cal-month-lbl { width:11px; text-align:center; font-size:9px; color:var(--mt-muted); flex-shrink:0; }
.mt-cal-grid      { display:flex; gap:1px; }
.mt-cal-days      { display:flex; flex-direction:column; gap:2px; margin-right:4px; flex-shrink:0; }
.mt-cal-days div  { height:11px; width:14px; font-size:9px; color:var(--mt-muted); line-height:11px; }
.mt-cal-week      { display:flex; flex-direction:column; gap:2px; }
.mt-cal-cell      { width:11px; height:11px; border-radius:2px; flex-shrink:0; }
.mt-cal-legend    { display:flex; align-items:center; gap:3px; margin-top:4px; }
.mt-cal-legend .mt-cal-cell { width:11px; height:11px; }

/* ── Boutons mode envoi ── */
.mt-send-mode-btn {
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    color: var(--mt-muted);
    padding: .3rem .65rem;
    font-size: .78rem;
    cursor: pointer;
    transition: all .15s;
}
.mt-send-mode-btn.active {
    background: var(--mt-accent2);
    border-color: var(--mt-accent2);
    color: #fff;
    font-weight: 600;
}

/* ── Boutons classement ── */
.mt-scores-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.mt-rank-btn {
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    color: var(--mt-muted);
    padding: .3rem .6rem;
    font-size: .75rem;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.mt-rank-btn.active {
    background: var(--mt-accent);
    border-color: var(--mt-accent);
    color: #000;
    font-weight: 600;
}
.mt-keyer-mode-btn {
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    color: var(--mt-muted);
    cursor: pointer;
    transition: all .15s;
}
.mt-keyer-mode-btn.active {
    background: var(--mt-accent);
    border-color: var(--mt-accent);
    color: #000;
    font-weight: 600;
}
/* Bouton d'inversion du manipulateur (gauchers) — c'est un interrupteur,
   pas un mode : style volontairement distinct du selecteur de manipulateur. */
.mt-paddle-rev-btn {
    background:    transparent;
    border:        1px dashed var(--mt-border);
    border-radius: 6px;
    color:         var(--mt-muted);
    cursor:        pointer;
    font-size:     .78rem;
    padding:       .3rem .7rem;
    transition:    all .15s;
}
.mt-paddle-rev-btn:hover {
    border-color: var(--mt-accent);
    color:        var(--mt-accent);
}
.mt-paddle-rev-btn.active {
    background:   rgba(138, 109, 59, .14);
    border-style: solid;
    border-color: var(--mt-accent);
    color:        var(--mt-accent);
    font-weight:  600;
}

/* Inversion appliquee : les deux palettes echangent leur place a l'ecran,
   les libelles restant exacts. */
.mt-paddle-swapped #btn-dit,
.mt-paddle-swapped #btn-chat-dit { order: 2; }
.mt-paddle-swapped #btn-dah,
.mt-paddle-swapped #btn-chat-dah { order: 1; }

.mt-btn-iambic {
    flex: 1;
    max-width: 140px;
    padding: .8rem .5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
    line-height: 1.3;
    border: 2px solid var(--mt-accent);
    background: var(--mt-surface);
    color: var(--mt-accent);
    transition: background .08s, color .08s;
}
/* Boutons iambiques chat — pleine largeur, pas de max-width */
#btn-chat-dit, #btn-chat-dah {
    max-width: none;
}
.mt-btn-iambic:active, .mt-btn-iambic.pressing {
    background: var(--mt-accent);
    color: #000;
}
#btn-dah {
    border-color: var(--mt-accent2);
    color: var(--mt-accent2);
}
#btn-dah:active, #btn-dah.pressing {
    background: var(--mt-accent2);
    color: #000;
}

/* ── Défis ── */
.mt-challenge-card {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 8px;
  padding: .7rem 1rem;
  margin-bottom: .5rem;
}
.mt-challenge-vs   { font-size: .88rem; color: var(--mt-text); margin-bottom: .2rem; }
.mt-challenge-info { font-size: .78rem; color: var(--mt-muted); }

/* ══════════════════════════════════════════════
   CHAT MORSE
══════════════════════════════════════════════ */
.mt-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}
.mt-chat-rooms {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.mt-chat-room-btn {
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    color: var(--mt-muted);
    padding: .3rem .65rem;
    font-size: .78rem;
    cursor: pointer;
}
.mt-chat-room-btn.active {
    background: var(--mt-accent2);
    border-color: var(--mt-accent2);
    color: #fff;
    font-weight: 600;
}
.mt-chat-messages {
    height: 340px;
    overflow-y: auto;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    padding: .7rem;
    margin-bottom: .6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.mt-chat-msg {
    background: var(--mt-surface);
    border-radius: 8px;
    padding: .55rem .8rem;
    max-width: 88%;
    align-self: flex-start;
}
.mt-chat-mine {
    background: rgba(240,165,0,.15);
    align-self: flex-end;
    border: 1px solid rgba(240,165,0,.3);
}
.mt-chat-meta {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .2rem;
}
.mt-chat-call  { font-size: .78rem; color: var(--mt-accent); font-weight: 700; }
.mt-chat-time  { font-size: .7rem;  color: var(--mt-muted); white-space: nowrap; cursor: default; }
.mt-chat-text  { font-size: .88rem; color: var(--mt-text);  line-height: 1.4; }
.mt-chat-morse {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
}
.mt-chat-play-btn {
    background: var(--mt-accent2);
    border: none;
    border-radius: 50%;
    width: 22px; height: 22px;
    font-size: .7rem;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
}
.mt-chat-morse-code {
    font-family: var(--mt-mono);
    font-size: .72rem;
    color: var(--mt-muted);
    word-break: break-all;
}
.mt-chat-input-wrap {
    border-top: 1px solid var(--mt-border);
    padding-top: .6rem;
    flex-shrink: 0;
}
.mt-chat-morse-display {
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    padding: .4rem .7rem;
    margin-bottom: .4rem;
    font-family: var(--mt-mono);
    font-size: .82rem;
    color: var(--mt-muted);
    height: 2.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* Toujours visible — placeholder quand vide */
    min-height: 2.2rem;
}
.mt-chat-input-row {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-shrink: 0;
}
.mt-chat-mode-toggle {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.mt-chat-input-mode {
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    padding: .35rem .7rem;
    font-size: .8rem;
    font-family: var(--mt-ui);
    cursor: pointer;
    color: var(--mt-muted);
    transition: all .15s;
}
.mt-chat-input-mode:hover {
    border-color: var(--mt-accent2);
    color: var(--mt-accent2);
}
.mt-chat-input-mode.active {
    background: var(--mt-accent2);
    border-color: var(--mt-accent2);
    color: #fff;
    font-weight: 500;
}
.mt-chat-paddle-btn {
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: 7px;
    padding: .5rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mt-text);
    user-select: none;
    -webkit-user-select: none;
}
.mt-chat-paddle-btn:active {
    background: var(--mt-accent);
    color: #000;
}

.mt-chat-hide-text .mt-chat-text {
    filter: blur(6px);
    user-select: none;
    cursor: pointer;
    transition: filter .2s;
}
.mt-chat-hide-text .mt-chat-text:hover {
    filter: blur(0);
}
.mt-chat-hide-text .mt-chat-morse-code {
    filter: blur(6px);
    user-select: none;
    transition: filter .2s;
}
.mt-chat-hide-text .mt-chat-morse-code:hover {
    filter: blur(0);
}

/* ── Raccourcis clavier ── */
.mt-shortcuts-hint {
    font-size: .72rem;
    color: var(--mt-muted);
    text-align: center;
    margin: .4rem 0 0;
    padding: 0; border: none; background: none;
    opacity: .7;
    transition: opacity .2s;
}
.mt-shortcuts-hint kbd {
    font-family: var(--mt-mono);
    font-size: .7rem;
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: 4px;
    padding: .05rem .3rem;
    color: var(--mt-text);
}
/* Réduire les marges et espacements quand le clavier est ouvert */
.keyboard-open .mt-panel.active {
    overflow-y: auto;
}
.keyboard-open .mt-seq-display,
.keyboard-open .mt-text-display {
    padding: .4rem;
    margin-bottom: .4rem;
    min-height: unset;
}
.keyboard-open .mt-seq-char {
    font-size: 2rem;
}
.keyboard-open .mt-session-info,
.keyboard-open .mt-progress-wrap {
    display: none;
}

/* ── Mode paysage tablette ── */
@media screen and (orientation: landscape) and (min-height: 400px) {
    #morse-trainer {
        max-width: 900px;
    }
    .mt-panel.active {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.5rem;
        align-items: start;
    }
    .mt-tab-bar {
        grid-column: 1 / -1;
    }
}

/* ── Alignement des icônes SVG dans tous les boutons ── */
#morse-trainer button svg { flex-shrink: 0; vertical-align: -2px; }
#morse-trainer .mt-chat-room-btn,
#morse-trainer .mt-rank-btn,
#morse-trainer .mt-keyer-mode-btn,
#morse-trainer .mt-send-mode-btn,
#morse-trainer .mt-chat-input-mode {
  display: inline-flex; align-items: center; gap: .3rem;
}
#morse-trainer .mt-chat-play-btn {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Badges de messages non lus ── */
.mt-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: .35rem;
  background: #b42318; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 9px; flex-shrink: 0;
}
.mt-chat-room-btn.has-unread {
  border-color: var(--mt-accent);
  color: var(--mt-text);
  font-weight: 600;
}
/* Pastille sur l'onglet Chat */
.mt-tab { position: relative; }
.mt-tab-dot {
  position: absolute; top: 5px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #b42318;
  box-shadow: 0 0 0 2px var(--mt-surface);
  animation: mt-dot-pulse 2s ease-in-out infinite;
}
@keyframes mt-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}


/* ── Options du mode Dictée ── */
.mt-dict-opt {
  background: var(--mt-bg);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  padding: .35rem .7rem;
  font-size: .8rem;
  font-family: var(--mt-ui);
  cursor: pointer;
  color: var(--mt-muted);
  transition: all .15s;
  white-space: nowrap;
}
.mt-dict-opt:hover { border-color: var(--mt-accent2); color: var(--mt-accent2); }
.mt-dict-opt.active {
  background: var(--mt-accent2);
  border-color: var(--mt-accent2);
  color: #fff;
  font-weight: 500;
}
#morse-trainer.theme-dark .mt-dict-opt.active { color: #191817; font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 600px) {
  #morse-trainer    { margin: 0 auto; border-radius: 0; border-left: none; border-right: none; }
  .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; }
  .mt-koch-grid     { grid-template-columns: repeat(auto-fill, minmax(48px,1fr)); }
}

/* ── Empêcher tout débordement horizontal, notamment en mode PWA plein écran ── */
html, body { overflow-x: hidden; max-width: 100vw; }
#morse-trainer, #morse-trainer * { max-width: 100%; }
#morse-trainer .mt-koch-grid,
#morse-trainer .mt-tab-bar,
#morse-trainer .mt-chat-rooms { max-width: 100%; box-sizing: border-box; }

/* ── 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;
}