/* ============================================================
   VOCAL-LECTURE.CSS — Les Cahiers APC
   ============================================================ */

/* ── En-tête ──────────────────────────────────────────────── */
.vocal-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.vocal-logo { font-size: 1.1rem; font-weight: 700; color: #be185d; }
.vocal-score-pill {
  background: #be185d; color: #fff;
  border-radius: 99px; padding: 4px 14px;
  font-size: 0.85rem; font-weight: 600;
}

/* ── Alertes et badges ────────────────────────────────────── */
.vocal-alerte {
  background: #fef3c7; border: 1.5px solid #f59e0b;
  border-radius: 10px; padding: 10px 14px;
  color: #92400e; font-size: 0.9rem; margin-bottom: 12px;
}
.vocal-info-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.vocal-badge {
  padding: 4px 12px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 600;
  background: #f1f5f9; color: #64748b;
  border: 1px solid #e2e8f0;
}
.vocal-badge-ok   { background: #d1fae5; color: #065f46; border-color: #10b981; }
.vocal-badge-warn { background: #fef9c3; color: #713f12; border-color: #eab308; }

/* ── Section titre ────────────────────────────────────────── */
.vocal-section-titre {
  font-size: 0.9rem; font-weight: 700; color: #be185d;
  padding: 7px 14px; background: #fff0f6;
  border-left: 4px solid #be185d; border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
}

/* ── Liste des textes ─────────────────────────────────────── */
.vocal-liste-textes { display: flex; flex-direction: column; gap: 8px; }
.vocal-texte-card {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 10px; padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.15s;
}
.vocal-texte-card:hover {
  border-color: #be185d;
  box-shadow: 0 2px 8px rgba(190,24,93,0.1);
}
.vocal-texte-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.vocal-texte-pastille {
  width: 32px; height: 32px; flex-shrink: 0;
  background: #be185d; color: #fff;
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}
.vocal-texte-labels { min-width: 0; }
.vocal-texte-labels b { display: block; color: #1c2833; font-size: 0.9rem; }
.vocal-texte-labels span { color: #718096; font-size: 0.78rem; }
.vocal-score-badge {
  padding: 4px 10px; border-radius: 99px;
  font-size: 0.8rem; font-weight: 700;
}
.vocal-score-badge.ok     { background: #d1fae5; color: #065f46; }
.vocal-score-badge.moyen  { background: #fef9c3; color: #713f12; }
.vocal-score-badge.faible { background: #fee2e2; color: #7f1d1d; }
.vocal-score-new {
  font-size: 0.75rem; color: #718096; font-style: italic;
}

/* ── Écran de lecture ─────────────────────────────────────── */
.vocal-lecture-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.vocal-lecture-titre {
  font-weight: 700; color: #be185d; font-size: 0.95rem; flex: 1;
}

/* Zone texte */
.vocal-texte-zone {
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 10px; padding: 14px 16px;
  max-height: 40vh; overflow-y: auto;
  margin-bottom: 14px; font-size: 1rem;
  line-height: 1.75; color: #1c2833;
}
.vocal-intro-texte { margin-bottom: 10px; }
.vocal-dialog-ligne {
  margin-bottom: 6px; padding-left: 10px;
  border-left: 3px solid #be185d;
}
.vocal-locuteur {
  font-weight: 700; color: #be185d; margin-right: 6px;
}
.vocal-replique { color: #1c2833; }

/* Contrôles */
.vocal-controles {
  background: #fff0f6; border: 1.5px solid #be185d;
  border-radius: 12px; padding: 14px 16px;
  text-align: center; margin-bottom: 14px;
}
.vocal-statut {
  font-size: 0.9rem; color: #4a5568;
  margin-bottom: 12px; min-height: 1.2em;
}
.vocal-statut.enregistrement { color: #be185d; font-weight: 600; }
.vocal-statut.termine  { color: #1E8449; }
.vocal-statut.erreur   { color: #922B21; }

.vocal-btns-row {
  display: flex; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}

/* Bouton micro */
.vocal-btn-micro {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  width: 80px; height: 80px;
  border-radius: 50%; border: 3px solid #be185d;
  background: #fff; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(190,24,93,0.2);
}
.vocal-btn-micro:hover:not(:disabled) { background: #fff0f6; transform: scale(1.05); }
.vocal-btn-micro:disabled { opacity: 0.4; cursor: not-allowed; }
.vocal-btn-micro.enregistrement {
  background: #be185d; border-color: #be185d;
  animation: vocal-pulse 1.2s infinite;
}
.vocal-btn-micro.enregistrement .vocal-micro-icone,
.vocal-btn-micro.enregistrement .vocal-micro-label { color: #fff; }
@keyframes vocal-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(190,24,93,0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(190,24,93,0); }
}
.vocal-micro-icone { font-size: 1.6rem; line-height: 1; }
.vocal-micro-label { font-size: 0.7rem; font-weight: 600; color: #be185d; }

/* Bouton réécoute */
.vocal-btn-ecoute {
  padding: 10px 20px; border-radius: 99px;
  border: 2px solid #1A5276; background: #fff;
  color: #1A5276; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
  align-self: center;
}
.vocal-btn-ecoute:hover:not(:disabled) { background: #eaf4fb; }
.vocal-btn-ecoute:disabled { opacity: 0.4; cursor: not-allowed; }

/* Chrono */
.vocal-chrono {
  font-size: 0.85rem; color: #be185d; font-weight: 700;
  margin-top: 6px;
}

/* ── Résultat ──────────────────────────────────────────────── */
.vocal-resultat {
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 12px; padding: 16px;
  animation: gam-fade-in 0.3s ease;
}
.vocal-resultat-titre {
  font-weight: 700; font-size: 1rem; color: #1c2833;
  margin-bottom: 12px;
}
.vocal-score-cercle {
  width: 90px; height: 90px; border-radius: 50%;
  border: 5px solid #888; margin: 0 auto 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.vocal-score-grand { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.vocal-score-label { font-size: 1.2rem; }
.vocal-score-legende {
  display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap; font-size: 0.82rem; margin-bottom: 12px;
}
.vocal-leg-ok  { color: #065f46; }
.vocal-leg-ko  { color: #7f1d1d; }

.vocal-resultat-section {
  font-weight: 700; font-size: 0.85rem; color: #555;
  margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.vocal-texte-annote {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 12px;
  font-size: 0.9rem; line-height: 1.8;
  max-height: 200px; overflow-y: auto;
}
.vocal-mot-ok { background: #bbf7d0; border-radius: 3px; padding: 1px 2px; }
.vocal-mot-ko { background: #fecaca; border-radius: 3px; padding: 1px 2px; text-decoration: underline; text-decoration-color: #ef4444; }

.vocal-conseils { margin-top: 12px; }
.vocal-conseil-ok     { background:#d1fae5; color:#065f46; border:1px solid #10b981; border-radius:8px; padding:9px 13px; font-size:0.9rem; }
.vocal-conseil-moyen  { background:#fef9c3; color:#713f12; border:1px solid #eab308; border-radius:8px; padding:9px 13px; font-size:0.9rem; }
.vocal-conseil-faible { background:#fee2e2; color:#7f1d1d; border:1px solid #ef4444; border-radius:8px; padding:9px 13px; font-size:0.9rem; }

/* Bouton retour */
.vocal-retour { margin-bottom: 4px; }