*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #f4f7fb;
  --surface: #f8fafc;
  --surface-hover: #eef1f6;
  --border: #dce2ec;
  --border-light: #e5e9f2;
  --text: #172033;
  --text-secondary: #667085;
  /* RGAA 3.2 / WCAG 1.4.3 : #999 ne donnait que 2,85:1 sur blanc et 2,66:1 sur --surface,
     pour du texte informatif (statut de dictée, libellés d'onglets, en-têtes de cartes,
     pied de page). #666 atteint 5,74:1. --text-decor reste réservé au purement décoratif
     (séparateurs, traits), jamais à du texte porteur de sens. */
  --text-muted: #667085;
  --text-decor: #b0b0b0;
  --accent: #335eea;
  /* #335eea ne fait que 3,20:1 : correct pour un aplat ou une bordure, insuffisant pour du
     texte. --accent-text est la déclinaison à utiliser dès que la couleur porte des mots. */
  --accent-text: #274bbf;
  --danger-text: #c81e1e;
  --accent-hover: #294fd0;
  --accent-subtle: rgba(51, 94, 234, 0.08);
  --danger: #ef4444;
  --purple: #7c3aed;
  --orange: #f59e0b;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* L'écran de dictée reste plus étroit pour confort de lecture
   (longueur de ligne raisonnable dans la zone de transcription),
   tandis que l'écran de choix profite de toute la largeur de .main. */
#step-dictate {
  align-self: center;
  width: 100%;
  max-width: 760px;
}

/* ===================== Header ===================== */

.header {
  text-align: center;
  padding: 1.5rem 1.5rem 0.75rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.logo-icon {
  color: var(--accent-text);
}

.logo-text {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.tagline {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ===================== Steps ===================== */

.step {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== ÉTAPE 2 : Dictée ========== */

/* Model badge */

.current-model-badge {
  text-align: center;
}

.current-model-badge .badge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.current-model-badge .badge-label:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Le mot est écrit, pas seulement suggéré par une icône au survol : sur un écran tactile,
   il n'y a pas de survol, et rien ne disait que la pastille était cliquable. */
.current-model-badge .badge-change {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.5rem;
  margin-left: 0.15rem;
  border-left: 1px solid var(--border);
  color: var(--accent-text);
  opacity: 0.75;
  transition: opacity 0.2s;
}

.current-model-badge .badge-label:hover .badge-change {
  opacity: 1;
}

.current-model-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Barre badges haut de step-dictate */
.top-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

/* Pill langue de transcription */
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 0.2rem 0.5rem 0.2rem 0.7rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.lang-badge:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.lang-badge-flag {
  font-size: 0.9rem;
  line-height: 1;
}

.lang-badge-select {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0 1.2rem 0 0.1rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
}

.lang-badge-select:focus {
  outline: none;
}

/* Bannière de compatibilité Firefox / macOS */
.compat-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 auto 1.25rem;
  max-width: 720px;
  padding: 0.85rem 1rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  color: #92400e;
  font-size: 0.82rem;
  line-height: 1.45;
}

.compat-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #f59e0b;
}

.compat-warning strong {
  color: #78350f;
}

.compat-warning em {
  font-style: normal;
  font-weight: 600;
}

.compat-warning-text {
  flex: 1;
}

/* Dictation hero zone */

.dictate-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
}

/* Record button */

.record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  padding: 1.1rem 3rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(51, 94, 234, 0.3);
}

.record-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(51, 94, 234, 0.35);
}

.record-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.record-btn.recording {
  background: var(--danger);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
  animation: pulse-ring 2s ease-in-out infinite;
}

@keyframes pulse-ring {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.25);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);
  }
}

.mic-icon {
  flex-shrink: 0;
}

/* Status */

.status {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.4em;
}

.status.ready {
  color: var(--accent-text);
  font-weight: 500;
}

.status.recording {
  color: var(--danger-text);
  font-weight: 500;
  animation: pulse 1.5s ease-in-out infinite;
}

.status.processing {
  color: var(--purple);
  font-weight: 500;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* Cards (output, history) */

.card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}

.card-header h2 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
}

.toggle-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.toggle-btn.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent-text);
}

.icon-btn.copied {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.copied-label {
  font-size: 0.72rem;
  font-weight: 500;
}

.icon-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.text-btn {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
}

.text-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.06);
}

/* Card header actions */

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Output */

.output-text {
  padding: 1.1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 3.5em;
  outline: none;
  cursor: text;
}

.output-text:focus {
  box-shadow: inset 0 0 0 2px rgba(51, 94, 234, 0.2);
}

.output-text:empty::before {
  content: "Cliquez ici puis dictez avec le bouton ou le raccourci clavier…";
  color: var(--text-muted);
  font-style: italic;
  pointer-events: none;
}

/* Options bar */

.options-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.4rem 0;
}

.options-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.options-hint kbd {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--border);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.options-hint kbd:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.options-hint kbd.capturing {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.shortcut-reset {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.65rem;
  padding: 0 0.3rem;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
  vertical-align: middle;
}

.shortcut-reset:hover {
  opacity: 1;
  color: var(--accent-text);
}

/* Toggle pill */

.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.toggle-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
}

.toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--border);
  border-radius: 9px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.toggle-pill[aria-checked="true"] .toggle-track {
  background: var(--accent);
}

.toggle-pill[aria-checked="true"] .toggle-thumb {
  transform: translateX(14px);
}

.toggle-pill[aria-checked="true"] .toggle-label {
  color: var(--accent-text);
}

/* History */

.history-list {
  display: flex;
  flex-direction: column;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-light);
}

.history-item:last-child {
  border-bottom: none;
}

.history-item:hover {
  background: var(--surface);
}

.history-content {
  flex: 1;
  min-width: 0;
}

.history-text {
  font-size: 0.85rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  display: block;
}

.history-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.hist-btn {
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.copy-hist-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.delete-hist-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.06);
}

.history-meta .time {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.history-model {
  font-size: 0.62rem;
  color: var(--accent-text);
  background: var(--accent-subtle);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

/* Bottom actions */

.bottom-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.change-model-btn {
  align-self: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: all 0.15s;
}

.change-model-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.change-model-btn.danger-link:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ===================== Footer ===================== */

.footer {
  border-top: 1px solid var(--border-light);
  padding: 0.85rem 1.5rem;
  text-align: center;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-links .sep {
  color: var(--border);
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--accent-text);
}

.footer-note {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.5;
}

.footer-note a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-note a:hover {
  color: var(--accent-text);
}

.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-link-btn:hover {
  color: var(--accent-text);
}

/* ===================== Modal ===================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.modal-box h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
}

.modal-box h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-text);
  margin: 1.25rem 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-box p,
.modal-box li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

.modal-box ul {
  padding-left: 1.25rem;
  margin: 0 0 0.5rem;
}

.modal-box a {
  color: var(--accent-text);
  text-decoration: none;
}

.modal-box a:hover {
  text-decoration: underline;
}

.modal-box code {
  font-family: monospace;
  font-size: 0.78rem;
  background: var(--surface-hover);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* ===================== Modal Intégration widget ===================== */

.embed-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.6rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.embed-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-text);
  cursor: pointer;
}

.embed-option-inline {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.embed-option-inline select {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.embed-option-inline select:focus {
  border-color: var(--accent);
}

.embed-option-hint {
  color: var(--text-muted);
  font-size: 0.74rem;
  flex-basis: 100%;
}

.embed-code-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin: 0.3rem 0 1rem;
}

.embed-code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  resize: none;
  outline: none;
}

.embed-code:focus {
  border-color: var(--accent);
  background: var(--bg);
}

.embed-copy-btn {
  align-self: stretch;
  padding: 0 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.embed-copy-btn:hover {
  background: var(--accent-hover);
}

.embed-copy-btn.copied {
  background: var(--accent-hover);
}

.embed-preview-label {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  margin: 0.6rem 0 0.4rem !important;
}

.embed-preview {
  width: 100%;
  height: 110px;
  border: 0;
  display: block;
  margin-bottom: 0.4rem;
}

/* ===================== Utilities ===================== */

.hidden {
  display: none !important;
}

/* ===================== Onglets ===================== */

.student-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: min(100%, 680px);
  margin: 0 auto 1rem;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
}

.student-flow li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.student-flow li+li::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  margin-right: 0.3rem;
  background: var(--border);
}

.student-flow span {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(51, 94, 234, 0.1);
  color: var(--accent-text);
  font-size: 0.7rem;
}

.main-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
}

.tabs {
  display: flex;
  gap: 3px;
  background: var(--surface);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.teacher-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.teacher-entry:hover,
.teacher-entry.active {
  border-color: var(--accent);
  color: var(--accent-text);
  background: rgba(51, 94, 234, 0.06);
}

.teacher-entry:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

/* L'import est d'une autre nature que les trois modes : un filet le détache au lieu de le
   laisser couper la progression une voix → deux voix → plusieurs voix. Il ne prend pas de
   place quand l'onglet Réunion est masqué (moteur local) — la barre resterait sinon coupée
   sur un vide. */
.tab-sep {
  width: 1px;
  align-self: stretch;
  margin: 0.3rem 0.25rem;
  background: var(--border);
  flex-shrink: 0;
}

.tab-import {
  flex: 0 1 auto;
}

.tab:hover:not(.active) {
  color: var(--text-secondary);
  background: var(--surface-hover);
}

.tab.active {
  background: var(--bg);
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Panneaux d'onglet */

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: fadeIn 0.2s ease;
}

/* ===================== Onglet Fichier ===================== */

/* Numéro d'étape : les deux questions de l'import, dans l'ordre où on se les pose. */
.import-step {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.2rem 0 0.5rem;
}

.import-step:first-child {
  margin-top: 0;
}

/* Destination du fichier importé. Deux cartes plates plutôt qu'un select : ce qui distingue
   les deux choix n'est pas leur nom mais ce qu'ils produisent, et un select cache cette
   phrase-là au moment précis où elle décide du choix. */
.import-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.import-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.import-mode:hover:not(:disabled) {
  border-color: var(--accent);
}

.import-mode:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.import-mode.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--text);
}

.import-mode.active svg {
  color: var(--accent-text);
}

/* Désactivé mais LISIBLE : c'est la note en dessous qui dit pourquoi, et l'utilisateur doit
   pouvoir lire ce qu'il rate pour avoir envie de changer de moteur. */
.import-mode:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.import-mode-name {
  font-size: 0.82rem;
  font-weight: 700;
}

.import-mode-desc {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.import-mode-note {
  margin: -0.4rem 0 0.8rem;
}

@media (max-width: 640px) {
  .import-modes {
    grid-template-columns: 1fr;
  }

  .import-mode {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}

/* Ce que le dépôt va déclencher, écrit dans la zone de dépôt : le choix est mémorisé d'une
   session à l'autre, il ne doit jamais produire de surprise — surtout quand il envoie une
   heure d'audio chez Albert. */
.file-drop-dest {
  font-size: 0.78rem;
  color: var(--accent-text);
  font-weight: 600;
}

/* Import par lien. Discret sous la zone de dépôt : c'est le cas particulier, pas la
   règle — mais c'est le seul chemin pour une visio déjà enregistrée. */
.visio-link {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.visio-link-label {
  font-size: 0.82rem;
  font-weight: 600;
}

.visio-link-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.visio-link-row .meeting-input {
  flex: 1;
  min-width: 240px;
}

.visio-link-row .action-btn {
  flex-shrink: 0;
}

.visio-link code {
  font-size: 0.9em;
  background: var(--surface);
  padding: 0 0.25rem;
  border-radius: 4px;
}

.visio-link-out {
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border-left: 3px solid var(--accent);
}

.visio-link-out.is-error {
  border-left-color: var(--danger);
  color: var(--danger-text);
}

@media (max-width: 640px) {
  .visio-link-row .action-btn {
    width: 100%;
  }
}

.file-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.file-drop-zone:hover,
/* `drag-over` et non `dragover` : le JS pose l'un, le CSS attendait l'autre — le survol de
   dépôt n'a donc jamais rien allumé. */
.file-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.file-input-hidden {
  display: none;
}

.file-drop-icon {
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.file-drop-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.file-drop-sub {
  font-size: 0.83rem;
  color: var(--text-muted);
}

.file-browse-btn {
  background: none;
  border: none;
  color: var(--accent-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.file-drop-formats {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.file-progress-zone {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.file-status-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.file-stop-btn {
  margin-top: 0.3rem;
  padding: 0.4rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--danger, #ef4444);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.file-stop-btn:hover {
  opacity: 0.85;
}

.file-stop-btn.hidden {
  display: none;
}

.file-output-text:empty::before {
  content: "La transcription apparaîtra ici au fil du traitement…";
  color: var(--text-muted);
  font-style: italic;
  pointer-events: none;
}

.action-btn.small-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 7px;
}

/* ===================== Onglet Discussion ===================== */

/* Les deux interlocuteurs sont présentés comme une paire symétrique, reliés par une
   flèche : la lecture est immédiate, et l'ensemble reste centré sur le même axe que le
   bouton d'enregistrement placé dessous. */
.speakers-config {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0.75rem;
  width: 100%;
}

.speakers-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: var(--text-decor);
  flex-shrink: 0;
}

.speaker-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.speaker-field label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* La pastille colorée reprend le code couleur des blocs de transcription : on sait avant
   même de parler quelle couleur portera chaque intervenant. */
.speaker-input-wrap {
  position: relative;
  display: flex;
}

.speaker-badge {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}

.speaker-a-field .speaker-badge {
  background: var(--accent);
}

.speaker-b-field .speaker-badge {
  background: var(--purple);
}

.speaker-a-field label {
  color: var(--accent-text);
}

.speaker-b-field label {
  color: var(--purple);
}

/* Champs de l'onglet « Discussion à deux ». Ces règles portaient le nom
   `.speaker-name-input` ; un renommage trop large les avait débaptisées, laissant les
   champs sans aucun style (apparence brute du navigateur). Le mode Réunion utilise une
   classe distincte, `.meeting-speaker-name`. */
.speaker-name-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem 0.5rem 2.35rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.speaker-a-field .speaker-name-input:focus {
  border-color: var(--accent);
}

.speaker-b-field .speaker-name-input:focus {
  border-color: var(--purple);
}

/* Focus clavier visible : `outline: none` seul rendait le champ indétectable au clavier.
   L'anneau reprend la couleur du locuteur concerné, cohérente avec sa pastille et ses
   blocs de transcription — un anneau vert sur le champ violet cassait le code couleur. */
.speaker-a-field .speaker-name-input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.speaker-b-field .speaker-name-input:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 1px;
}

.speaker-a-field.speaking .speaker-name-input {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(51, 94, 234, 0.25);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.speaker-b-field.speaking .speaker-name-input {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.dialogue-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.dialogue-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: rgba(51, 94, 234, 0.06);
  color: var(--accent-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.dialogue-switch-btn .switch-icon {
  transition: transform 0.3s ease;
}

.dialogue-switch-btn.to-speaker-a .switch-icon {
  transform: scaleX(-1);
}

.dialogue-switch-btn:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(51, 94, 234, 0.25);
}

.dialogue-switch-btn:active {
  transform: scale(0.96);
}

.dialogue-speaker-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--fg-muted);
  font-weight: 500;
}

.dialogue-speaker-indicator .speaker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-muted);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.dialogue-speaker-indicator.speaker-a .speaker-dot {
  background: var(--accent);
}

.dialogue-speaker-indicator.speaker-a {
  color: var(--accent-text);
}

.dialogue-speaker-indicator.speaker-b .speaker-dot {
  background: var(--purple);
}

.dialogue-speaker-indicator.speaker-b {
  color: var(--purple);
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}

/* Affichage de la discussion */

.dialogue-output {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 4rem;
  max-height: 50vh;
  overflow-y: auto;
}

.dialogue-segment {
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.dialogue-segment.speaker-a {
  background: rgba(51, 94, 234, 0.07);
  border-left-color: var(--accent-text);
}

.dialogue-segment.speaker-b {
  background: rgba(124, 58, 237, 0.07);
  border-left-color: var(--purple);
}

.segment-speaker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.segment-ts {
  font-weight: 400;
  font-size: 0.65rem;
  opacity: 0.65;
  letter-spacing: 0;
  text-transform: none;
}

.dialogue-segment.speaker-a .segment-speaker {
  color: var(--accent-text);
}

.dialogue-segment.speaker-b .segment-speaker {
  color: var(--purple);
}

.segment-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}

.pending-text {
  color: var(--text-muted);
  font-style: italic;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ===================== Responsive ===================== */

@media (max-width: 700px) {
  .model-cards {
    grid-template-columns: 1fr;
  }

  .header {
    padding: 1.5rem 1rem 0.75rem;
  }

  .main {
    padding: 0 1rem 2rem;
  }

  .logo-text {
    font-size: 1.35rem;
  }

  .dictate-hero {
    padding: 1.25rem 0;
  }

  .record-btn {
    padding: 1rem 2.25rem;
    font-size: 0.95rem;
  }

  .footer-links {
    font-size: 0.65rem;
  }

  .tabs {
    gap: 2px;
    padding: 3px;
  }

  .tab {
    font-size: 0.7rem;
    padding: 0.45rem 0.35rem;
    gap: 0.25rem;
  }

  .tab svg {
    display: none;
  }

  /* Quatre onglets dont un libellé long débordaient de la barre, en `nowrap` : sur mobile
     l'import reprend sa part comme les autres et perd sa précision de format. */
  .tab-import {
    flex: 1;
  }

  .tab-long {
    display: none;
  }

  .tab-sep {
    margin: 0.25rem 0.1rem;
  }

  .speakers-config {
    flex-direction: column;
    gap: 0.6rem;
  }

  .albert-bar {
    flex-wrap: wrap;
  }

  .albert-select {
    flex: 1;
    min-width: 0;
  }
}

/* --- Ponctuation locale ---
   Volontairement en vert accent (et non en bleu Albert) : c'est le traitement qui ne sort
   pas du navigateur, il ne doit pas être confondu avec les actions en ligne. */
.punct-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: var(--bg, #fff);
  color: var(--accent-text);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.punct-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

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

.punct-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Réserve la largeur de la plus large des étiquettes « Ponctuer » et « Rétablir ». */
.punct-btn>span {
  display: inline-block;
  min-width: 4.9em;
  text-align: center;
}

/* ===================== Mode mini (PWA widget) ===================== */

.mini-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.mini-mode-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* Widget flottant */
.mini-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  width: 240px;
  height: 260px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  animation: miniSlideIn 0.25s ease;
  overflow: hidden;
}

@keyframes miniSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===================== Accessibilité transversale ===================== */

/* Libellé réservé aux technologies d'assistance. */
/* `min-height: 0` : une hauteur minimale posée ailleurs (ici `.status`) l'emportait sur le
   `height: 1px` et l'élément « masqué » réservait toujours sa ligne. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le sélecteur de langue supprimait son outline sans rien mettre à la place : au clavier,
   le contrôle devenait invisible (RGAA 10.7). On rend la pilule entière visible. */
.lang-badge:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.lang-badge-select:focus-visible {
  outline: none;
}

/* RGAA 13.8 / WCAG 2.2.2 : le statut d'enregistrement clignotait en continu pendant toute
   la dictée, sans moyen de l'arrêter. On neutralise toutes les animations décoratives pour
   qui en fait la demande système, et on remplace le clignotement par un repère statique. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .status.recording::before {
    content: "● ";
  }

  .meeting-rec-dot {
    animation: none;
  }
}

/* ===================== Mode Réunion ===================== */

.meeting-recover {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--orange);
  background: rgba(245, 158, 11, 0.08);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.recover-body {
  flex: 1;
  min-width: 240px;
}

.recover-title {
  display: block;
  font-size: 0.9rem;
}

.recover-detail {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.recover-actions {
  display: flex;
  gap: 0.5rem;
}

.meeting-setup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.meeting-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.meeting-field label {
  font-size: 0.82rem;
  font-weight: 600;
}

.field-hint {
  font-weight: 400;
  color: var(--text-muted);
}

.field-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.meeting-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg);
}

.meeting-input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.meeting-textarea {
  resize: vertical;
  line-height: 1.5;
}

/* Identité de la réunion : le nom du document, en haut, dans les trois états du parcours.
   Il n'est pas rangé avec l'ordre du jour et le vocabulaire parce qu'il ne s'utilise pas au
   même moment — on le lit à chaque fois qu'on regarde le résultat. */
.meeting-identity {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}

/* Une fois la réunion faite, l'intitulé est le titre de ce qui est affiché dessous : il en
   prend l'allure, sans cesser d'être modifiable. Centré sur l'axe de la colonne, comme les
   trois vues juste en dessous — aligné à gauche, il était en outre décalé du récapitulatif
   par le rembourrage interne du champ, ce qui donnait deux bords gauches à un même bloc. */
.meeting-done .meeting-identity {
  text-align: center;
  gap: 0.15rem;
  margin-bottom: 1.2rem;
}

.meeting-done .meeting-identity>.meeting-field>label {
  display: none;
}

.meeting-done .meeting-title-input {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 0.3rem 0.6rem;
  border-color: transparent;
  background: transparent;
}

.meeting-done .meeting-title-input::placeholder {
  font-weight: 500;
  font-size: 0.95rem;
}

.meeting-done .meeting-title-input:hover {
  border-color: var(--border-light);
}

.meeting-done .meeting-title-input:focus-visible {
  border-color: var(--accent);
  background: var(--bg);
}

/* Préparation repliée : une ligne discrète, pas un formulaire. Ce qu'on veut voir avant
   une réunion, c'est le bouton d'enregistrement. */
.meeting-prep {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.meeting-prep-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.meeting-prep-summary::-webkit-details-marker {
  display: none;
}

.meeting-prep-summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

.meeting-prep-summary svg {
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.meeting-prep[open]>.meeting-prep-summary svg {
  transform: rotate(180deg);
}

.meeting-prep-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}

.meeting-prep-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.2rem 0.8rem 0.9rem;
}

/* Une fois la réunion faite, ce n'est plus un repli mais le panneau de réglages. */
.meeting-done .meeting-prep {
  border-color: var(--border);
}

/* Signalée, mais pas au point de peser plus que l'intitulé qu'elle commente. */
.meeting-title-note {
  color: var(--accent-text);
  font-size: 0.72rem;
}

/* Type de séance : deux pastilles, pas un select. Le choix change la grille d'analyse,
   il doit se lire d'un coup d'œil et non se déplier. */
.meeting-kind {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  /* Centré sur l'axe de la colonne dans les deux états : avant la séance il rejoint l'axe du
     bouton de démarrage, après celui de l'intitulé et des trois vues. Aligné à gauche, il
     pendait sous un champ pleine largeur sans rien pour le tenir.
     La marge est SOUS et non plus dessus : le choix précède désormais l'intitulé, dont il
     décide le libellé. */
  align-self: center;
  margin-bottom: 0.5rem;
}

.meeting-done .meeting-kind {
  margin-bottom: 0.15rem;
}

.meeting-kind-btn {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.meeting-kind-btn.active {
  background: var(--bg);
  color: var(--accent-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.meeting-kind-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .meeting-prep-summary svg {
    transition: none;
  }
}

/* Récapitulatif de la réunion affichée, sous son intitulé. */
.meeting-recap {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Colonne centrée : le bouton de démarrage seul sur son axe. */
.meeting-start-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.2rem;
}

.meeting-record-btn {
  flex-shrink: 0;
}

/* Une zone de statut vide ne doit occuper aucune place — ni hauteur, ni espacement.
   `role="status"` reste posé dans le balisage pour que le lecteur d'écran annonce le
   message dès qu'il apparaît. */
#meeting-status:empty,
.meeting-safety:empty {
  display: none;
}

#meeting-status {
  text-align: center;
  margin: 0.7rem 0 0.1rem;
}

.meeting-safety {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 0.5rem;
}

/* --- Réunion terminée -----------------------------------------------------
   Le bouton de démarrage disparaît : à ce stade, la seule action de reprise est
   « Nouvelle réunion », qui prévient avant de remplacer ce qui est affiché.
   L'option de conservation audio n'a plus de prise sur rien. Les réglages restent
   actifs mais passent SOUS le résultat et s'effacent visuellement derrière lui. */
.meeting-done .meeting-start-row,
.meeting-done .meeting-carry {
  display: none;
}

/* Un seul pied de page, et non deux blocs qui se suivent. Les réglages encore actifs et les
   actions de fin de séance appartiennent au même moment — « ce qui reste à faire une fois
   qu'on a lu » — alors qu'un panneau encadré posé sous le compte rendu se lisait comme une
   étape suivante, vide de surcroît. Le filet ouvre la zone, le panneau y perd son cadre. */
.meeting-done .meeting-setup {
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-light);
}

.meeting-done .meeting-prep {
  border-color: transparent;
  background: none;
}

.meeting-done .meeting-prep[open] {
  border-color: var(--border-light);
  background: var(--surface);
}

.meeting-prep-after {
  display: none;
}

.meeting-done .meeting-prep-after {
  display: block;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.meeting-done .meeting-prep-summary {
  padding-left: 0;
}

.meeting-done .meeting-prep[open]>.meeting-prep-summary {
  padding-left: 0.8rem;
}

.meeting-done .meeting-setup .meeting-input {
  background: var(--bg);
}

.meeting-done .meeting-recap {
  margin-bottom: 0;
}

/* Ne s'affiche plus que pour signaler un incident : le message de fin normal est annoncé
   sans occuper l'écran (classe `sr-only` posée par `setStatus`). */
.meeting-done #meeting-status {
  text-align: left;
  margin: 0 0 0.9rem;
}

.meeting-done-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.2rem;
}

/* « Nouvelle réunion » à l'opposé des téléchargements : on ne veut pas la voir
   cliquée à la place du bouton d'export voisin. */
.meeting-done-actions #meeting-new-btn {
  margin-left: auto;
}

.meeting-live {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: var(--surface);
  margin-bottom: 1rem;
}

.meeting-live-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.meeting-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: pulse-dot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.meeting-elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
}

.meeting-live-phase {
  font-size: 0.82rem;
  font-weight: 600;
}

.meeting-live-info {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.meeting-progress {
  height: 6px;
  background: var(--border-light);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.7rem;
}

.meeting-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.4s ease;
}

/* Ligne chiffrée sous la barre : une barre seule ne dit pas si elle avance encore. */
.meeting-progress-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.meeting-progress-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}

.meeting-live-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* L'enregistrement est terminé mais la transcription continue : c'est la seule attente du
   parcours, et le point rouge clignotant y laissait croire que le micro tournait encore. */
.meeting-live.is-finishing {
  border-color: var(--accent);
}

.meeting-live.is-finishing .meeting-rec-dot {
  background: var(--accent);
  animation: none;
}

.meeting-live.is-finishing .meeting-live-phase {
  color: var(--accent-text);
}

/* Centrés : collés à gauche, les trois vues se lisaient comme une suite de liens perdue
   sous un titre, alors qu'elles sont la navigation principale du résultat. */
.meeting-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 0.9rem;
}

.meeting-view-tab {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.meeting-view-tab.active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.meeting-view-tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* Travail en cours dans une vue qu'on ne regarde pas : sans repère sur l'onglet, l'analyse
   lancée toute seule à la fin de la séance n'existerait pour personne. */
.meeting-view-tab .mview-spinner {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: albert-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.meeting-view-tab:not(.is-working) .mview-spinner {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .meeting-view-tab .mview-spinner {
    animation: none;
  }
}

.meeting-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 1.2rem 0;
  text-align: center;
}

.meeting-transcript {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 0.3rem;
}

.meeting-turn {
  border-left: 3px solid hsl(var(--speaker-hue, 160) 55% 45%);
  padding: 0.15rem 0 0.15rem 0.7rem;
}

.turn-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.turn-speaker {
  font-size: 0.78rem;
  font-weight: 700;
  color: hsl(var(--speaker-hue, 160) 60% 30%);
}

.turn-ts {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.turn-text {
  font-size: 0.88rem;
  line-height: 1.6;
}

.meeting-segment-text[contenteditable="true"] {
  border-radius: 4px;
  outline: none;
}

.meeting-segment-text[contenteditable="true"]:hover {
  background: var(--surface);
}

.meeting-segment-text[contenteditable="true"]:focus {
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* --- Discussion à deux : préparation --- */

/* Un seul axe vertical du haut de l'onglet jusqu'au bouton : le mode, l'explication, les
   noms et l'action sont tous centrés sur la même ligne médiane. La largeur est bornée pour
   que la paire de champs reste lisible sans s'étirer sur toute la colonne. */
.dialogue-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

/* Contrôle segmenté : les deux options vivent dans un même rail, la sélection glisse de
   l'une à l'autre. Deux boutons-pilules séparés donnaient l'impression de deux actions
   indépendantes plutôt que d'un choix unique. */
.dialogue-mode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-light);
}

.dialogue-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.36rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.dialogue-mode-btn:hover:not(.active) {
  color: var(--text);
}

.dialogue-mode-btn.active {
  background: var(--bg);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

.dialogue-mode-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Un seul mode disponible (moteur local) : le rail n'a plus de raison d'être. */
.dialogue-mode.single-mode {
  background: none;
  border: 0;
  padding: 0;
}

.dialogue-mode.single-mode .dialogue-mode-btn {
  pointer-events: none;
}

.dialogue-mode-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  max-width: 44ch;
  margin: -0.3rem auto 0;
}

@media (max-width: 560px) {

  /* En colonne, la flèche horizontale n'a plus de sens : on empile et on la masque. */
  .speakers-config {
    grid-template-columns: 1fr;
  }

  .speakers-link {
    display: none;
  }
}

/* ===================== Connexion de classe ===================== */

.tab-teacher {
  flex: 0 1 auto;
}

.classroom-student {
  margin-top: 1.25rem;
}

.classroom-student-head {
  align-items: flex-start;
}

.classroom-student-head .field-note,
.teacher-classroom .field-note {
  margin: 0.2rem 0 0;
}

.classroom-student .action-btn,
.teacher-classroom .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}

.classroom-student .action-btn.secondary {
  background: var(--bg);
  color: var(--accent-text);
}

.classroom-student .action-btn:disabled,
.teacher-classroom .action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.classroom-join-fields {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(11rem, 1fr) auto auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 1rem;
}

.classroom-join-fields label {
  display: grid;
  gap: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.classroom-code-input {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.classroom-status {
  margin: 0.8rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.classroom-status-connected {
  color: var(--accent-text);
  font-weight: 600;
}

.classroom-status-error,
.classroom-status-lost,
.classroom-status-not-found {
  color: var(--danger-text);
}

.classroom-status-connecting,
.classroom-status-reconnecting {
  color: var(--purple);
}

.teacher-session {
  margin-top: 1rem;
}

.teacher-code-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--surface);
}

.teacher-code {
  color: var(--accent-text);
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  user-select: all;
}

.teacher-code-row .danger-text {
  margin-left: auto;
  color: var(--danger-text);
}

.teacher-count {
  margin: 1rem 0 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.teacher-download-all {
  margin: 0 0 0.75rem;
}

.teacher-students {
  display: grid;
  gap: 0.75rem;
}

.teacher-empty,
.teacher-waiting {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.teacher-student-card {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg);
}

.teacher-student-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.teacher-student-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.teacher-presence {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.teacher-presence.connected {
  color: var(--accent-text);
}

.teacher-student-card time {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.teacher-production {
  margin: 0.65rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.55;
  color: var(--text-primary);
}

.teacher-production-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
}

.teacher-production-actions .teacher-download-production:only-child {
  margin-left: auto;
}

@media (max-width: 800px) {
  .classroom-join-fields {
    grid-template-columns: 1fr 1fr;
  }

  .classroom-join-fields .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .classroom-join-fields {
    grid-template-columns: 1fr;
  }

  .teacher-code-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .teacher-code-row .danger-text {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

/* Parcours élève et espace professeur simplifiés. */
#output-section,
#file-output-section,
#dialogue-output-section {
  width: min(100%, 760px);
  margin-inline: auto;
}

.output-text {
  min-height: 13rem;
  font-size: 1rem;
  line-height: 1.75;
}

.teacher-panel {
  max-width: 100%;
  text-align: left;
}

.teacher-classroom {
  padding: 1.35rem;
}

.classroom-student {
  width: min(100%, 760px);
  margin: 1.75rem auto 0;
  scroll-margin-top: 1rem;
  text-align: left;
  border-color: rgba(51, 94, 234, 0.28);
}

.classroom-primary {
  min-height: 46px !important;
  padding-inline: 1.25rem !important;
  font-size: 0.9rem !important;
}

.classroom-intro,
.classroom-connect {
  margin-top: 1rem;
}

.classroom-connect-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.classroom-connected {
  margin-top: 0.9rem;
}

.classroom-connected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.classroom-connected-head .classroom-status {
  margin: 0;
  font-size: 0.9rem;
}

.text-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.classroom-status-unsent {
  color: #9a6700;
  font-weight: 600;
}

.classroom-join-fields {
  grid-template-columns: 1fr 1fr;
}

.teacher-session {
  margin-top: 1.25rem;
}

.teacher-code-row {
  padding: 1rem 1.1rem;
}

.teacher-code {
  font-size: 1.65rem;
}

@media (max-width: 560px) {
  .student-flow {
    gap: 0.25rem;
    font-size: 0.66rem;
  }

  .student-flow li {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }

  .student-flow li+li::before {
    display: none;
  }

  .main-navigation {
    grid-template-columns: 1fr;
  }

  .teacher-entry {
    width: 100%;
  }

  .classroom-join-fields {
    grid-template-columns: 1fr;
  }

  .classroom-connect-actions {
    flex-direction: column;
  }

  .classroom-connect-actions .action-btn,
  .classroom-connected>.action-btn {
    width: 100%;
  }
}


/* =====================================================================
   DICTO LIVE — interface élève simplifiée
   app.js reste inchangé.
   ===================================================================== */

body {
  background: #f4f7fb;
  color: #172033;
}

.app {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
}

.main {
  max-width: 760px;
  padding: 0 0 2.5rem;
}

#step-dictate {
  max-width: 760px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 1.6rem 0 1.1rem;
}

.logo {
  justify-content: flex-start;
  margin: 0;
}

.logo-icon {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 8px 18px rgba(51, 94, 234, 0.18));
}

.logo-text {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.tagline {
  margin-left: auto;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: #e8edff;
  color: #335eea;
  font-size: 0.76rem;
  font-weight: 700;
}

.dicto-hidden-ui {
  display: none !important;
}

/* Professeur reste accessible, mais séparé du parcours élève */
.dicto-main-navigation {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}

.dicto-main-navigation .teacher-entry {
  min-height: auto;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: transparent;
  color: #667085;
  font-size: 0.74rem;
}

.dicto-main-navigation .teacher-entry:hover,
.dicto-main-navigation .teacher-entry.active {
  color: #335eea;
  background: #e8edff;
}

/* Cartes */
.dicto-card,
.teacher-classroom {
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(31, 45, 70, 0.07);
}

.dicto-card {
  margin-bottom: 18px;
}

.dicto-record-card {
  padding: 24px;
}

.dicto-card-heading {
  margin-bottom: 0.8rem;
}

.dicto-card-heading h2,
.dicto-text-header h2,
#classroom-student-title {
  margin: 0 0 0.35rem;
  color: #172033;
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-transform: none;
}

.dicto-card-heading p,
.dicto-card-note,
.dicto-send-card .field-note {
  margin: 0;
  color: #667085;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Carte 1 : dictée */
.dictate-hero {
  padding: 1rem 0 0.25rem;
}

#record-btn {
  width: 116px;
  height: 116px;
  min-width: 116px;
  padding: 0;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 10px 30px rgba(51, 94, 234, 0.28);
}

#record-btn .mic-icon {
  display: block;
  width: 38px;
  height: 38px;
}

#record-btn #record-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Vrai carré Stop : présent dans le HTML, piloté uniquement par .recording */
#record-btn .record-stop-square {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #fff;
}

#record-btn.recording {
  background: #e44747 !important;
  box-shadow: 0 0 0 0 rgba(228, 71, 71, 0.35) !important;
  animation: dicto-record-pulse 1.4s infinite !important;
}

#record-btn.recording .mic-icon {
  display: none !important;
}

#record-btn.recording .record-stop-square {
  display: block !important;
}

.record-stop-hint {
  display: none;
  margin-top: -0.5rem;
  color: #667085;
  font-size: 0.8rem;
  text-align: center;
}

/* app.js met également #status en .recording dès le début réel de la capture */
#status.recording+.record-stop-hint {
  display: block;
}

@keyframes dicto-record-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(228, 71, 71, 0.35);
  }

  70% {
    box-shadow: 0 0 0 18px rgba(228, 71, 71, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(228, 71, 71, 0);
  }
}

/* Carte 2 : texte */
.dicto-text-card {
  padding: 0;
  padding-bottom: 24px;
  overflow: hidden;
}

.dicto-text-header {
  padding: 22px 24px 12px;
  background: transparent;
  border-bottom: 0;
  align-items: flex-start;
}

.dicto-text-header .card-header-actions {
  margin-left: auto;
}

.dicto-text-card .output-text {
  margin: 0 24px;
  min-height: 210px;
  padding: 17px;
  border: 2px solid #dce2ec;
  border-radius: 16px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.6;
}

.dicto-text-card .output-text:focus {
  box-shadow: none;
  border-color: #335eea;
}

.dicto-text-card .output-text:empty::before {
  content: "Ton texte apparaîtra ici…";
  color: #98a2b3;
  font-style: normal;
}

/* Ponctuation locale sous le texte */
#voice-albert-bar.dicto-punct-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 12px 24px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#voice-albert-bar.dicto-punct-bar.hidden {
  display: none !important;
}

#voice-albert-bar .punct-btn {
  min-height: 38px;
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  background: #eef1f6;
  color: #273142;
  border: 1px solid #dce2ec;
}

#voice-albert-bar .punct-btn:hover,
#voice-albert-bar .punct-btn.active {
  border-color: #335eea;
  background: #e8edff;
  color: #335eea;
}

/* Carte 3 : connexion / envoi */
.dicto-send-card {
  padding: 24px;
  border-color: #e5e9f2;
}

.dicto-send-card .card-header {
  padding: 0;
  border: 0;
  background: transparent;
}

.classroom-intro,
.classroom-connect,
.classroom-connected {
  margin-top: 1rem;
}

.classroom-intro .classroom-primary {
  width: 100%;
}

.classroom-join-fields {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem;
  margin-top: 0;
}

.meeting-input,
.classroom-code-input {
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  border: 2px solid #dce2ec;
  border-radius: 14px;
  background: #fff;
  font-size: 0.95rem;
}

.classroom-code-input {
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
}

.meeting-input:focus-visible,
.classroom-code-input:focus-visible {
  outline: none;
  border-color: #335eea;
  box-shadow: 0 0 0 3px rgba(51, 94, 234, 0.12);
}

.classroom-student .action-btn,
.teacher-classroom .action-btn {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: #335eea;
  font-size: 0.88rem;
  font-weight: 700;
}

.classroom-student .action-btn.secondary {
  background: #eef1f6;
  color: #273142;
}

#classroom-send {
  background: #147d54;
}

.dicto-send-title {
  margin: 0 0 0.75rem;
  color: #172033;
  font-size: 1.1rem;
  font-weight: 750;
}

.classroom-status-connected {
  color: #187252;
}

/* Espace professeur cohérent avec la nouvelle identité */
.teacher-classroom {
  padding: 24px;
}

.teacher-code-row {
  background: #f4f7fb;
  border-color: #e5e9f2;
}

.teacher-code {
  color: #335eea;
}

/* Footer discret */
.footer {
  border: 0;
  padding: 0.5rem 0 1.5rem;
}

.footer-links {
  color: #98a2b3;
  font-size: 0.72rem;
}

@media (max-width: 560px) {
  .app {
    width: min(100% - 20px, 760px);
  }

  .header {
    padding: 1rem 0 0.9rem;
  }

  .tagline {
    display: none;
  }

  .dicto-record-card,
  .dicto-send-card {
    padding: 19px;
    border-radius: 18px;
  }

  .dicto-text-card {
    padding-bottom: 19px;
    border-radius: 18px;
  }

  #record-btn {
    width: 102px;
    height: 102px;
    min-width: 102px;
  }

  .dicto-text-header {
    padding: 19px 19px 10px;
  }

  .dicto-text-card .output-text {
    margin: 0 19px;
    min-height: 190px;
  }

  #voice-albert-bar.dicto-punct-bar {
    margin: 10px 19px 0;
  }

  #voice-albert-bar .punct-btn {
    width: 100%;
    justify-content: center;
  }

  .classroom-join-fields {
    grid-template-columns: 1fr !important;
  }

  .classroom-connect-actions {
    flex-direction: column;
  }

  .classroom-connect-actions .action-btn,
  .classroom-connected>.action-btn {
    width: 100%;
  }
}

#voice-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.28rem 0.55rem;
  min-height: 30px;

  border: 1px solid #dce2ec;
  border-radius: 8px;

  background: transparent;
  color: #667085;

  font-size: 0.72rem;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.15s ease;
}

#voice-download-btn:hover {
  background: #f4f7fb;
  border-color: #c7d2fe;
  color: #335eea;
}

#voice-download-btn:focus-visible {
  outline: 2px solid rgba(51, 94, 234, 0.25);
  outline-offset: 2px;
}