/* =========================================================
   Revisly — page « Enregistrements »
   (se charge par-dessus dashboard.css, qui fournit l'ossature
   et les éléments partagés : en-tête, puces, état vide)
   ========================================================= */

/* ---------- liste ---------- */
.recs{display:flex;flex-direction:column;gap:8px}

.rec{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:16px;width:100%;text-align:left;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:12px;padding:12px 16px;color:inherit;text-decoration:none;
  transition:border-color .15s,background .15s;
}
.rec:hover{border-color:var(--border-fort);background:var(--surface-hover)}

.rec .ic{
  flex:none;width:38px;height:38px;border-radius:11px;
  background:var(--surface-icon);border:.8px solid var(--surface-border);
  display:flex;align-items:center;justify-content:center;
}
.rec .ic svg{width:18px;height:18px;color:var(--sky-soft)}
.rec .body{min-width:0}
.rec .nm{font-size:.9375rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec .mt{margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.75rem;color:var(--ink-tertiary)}
.rec .tag{border:.8px solid var(--surface-border);border-radius:999px;padding:1px 8px;font-size:.6875rem;color:var(--ink-secondary)}
.rec .dur{font-size:.8125rem;color:var(--ink-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}

.etat{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:999px;font-size:.6875rem;font-weight:600;white-space:nowrap;
}
.etat i{width:7px;height:7px;border-radius:999px;flex:none}
.etat.pret{background:rgba(78,163,90,.16);border:.8px solid rgba(78,163,90,.4);color:var(--ink-ok)}
.etat.pret i{background:var(--moss)}
.etat.cours{background:rgba(201,162,39,.14);border:.8px solid rgba(201,162,39,.4);color:var(--ink-warn)}
.etat.cours i{background:var(--daisy);animation:pulse 1.2s ease-in-out infinite}
.etat.brouillon{background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-tertiary)}
.etat.brouillon i{background:var(--ink-mute)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- forme d'onde ---------- */
.wave{display:flex;align-items:center;gap:2px;height:28px}
.wave i{
  display:block;width:3px;border-radius:2px;background:var(--track);
  transition:background .2s;
}
.wave.mini{height:20px}
.wave.mini i{width:2px}
.wave i.done{background:var(--sky)}
.wave i.live{background:var(--sky-soft)}

/* ---------- enregistreur ---------- */
.recorder{
  max-width:520px;margin:0 auto;text-align:center;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:18px;padding:36px 28px;
}
.recorder h2{font-size:1.375rem;font-weight:600;letter-spacing:-.02em}
.recorder .hint{margin-top:8px;font-size:.8125rem;color:var(--ink-secondary)}

.pastille{
  width:88px;height:88px;margin:24px auto 0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(207,86,71,.14);border:1px solid rgba(207,86,71,.5);
}
.pastille i{width:26px;height:26px;border-radius:999px;background:var(--blush);display:block}
.recorder.actif .pastille i{animation:blink 1.4s ease-in-out infinite}
.recorder.pause .pastille{border-color:var(--surface-border);background:var(--surface-soft)}
.recorder.pause .pastille i{background:var(--ink-tertiary);animation:none}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.88)}}

.chrono{
  margin-top:18px;font-size:2.25rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.recorder .wave{justify-content:center;margin-top:20px;height:42px}
.recorder .wave i{width:4px;background:var(--sky)}

.recorder .controls{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.recorder .controls .btn{min-width:140px}
.btn-danger{background:rgba(207,86,71,.18);border:.8px solid rgba(207,86,71,.5);color:var(--ink-ko)}
.btn-danger:hover{background:rgba(207,86,71,.26)}

.avis{
  margin-top:22px;font-size:.75rem;line-height:1.6;color:var(--ink-tertiary);
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  border-radius:10px;padding:10px 14px;
}

/* ---------- lecteur + transcription ---------- */
.detail{max-width:760px;margin:0 auto;width:100%}
.detail-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.detail-top .lbl{min-width:0;flex:1}
.detail-top .lbl b{display:block;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-top .lbl span{font-size:.75rem;color:var(--ink-tertiary)}

.player{
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:16px;padding:20px;
}
.player .rangee{display:flex;align-items:center;gap:16px}
.play{
  flex:none;width:48px;height:48px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky);border:.8px solid var(--sky-border);color:#fff;
  transition:background .15s;
}
.play:hover{background:var(--sky-hover)}
.play svg{width:20px;height:20px}
.player .wave{flex:1;height:44px;gap:2px;cursor:pointer}
.player .temps{font-size:.8125rem;color:var(--ink-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.player .sous{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--ink-tertiary)}
.vitesse{
  padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:600;
  background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-secondary);
}
.vitesse:hover{color:var(--ink-primary);background:var(--surface-soft-hover)}

.sorties{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sortie{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;text-align:left;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  transition:border-color .15s,background .15s;
}
.sortie:hover{border-color:var(--border-fort);background:var(--surface-hover)}
.sortie .em{font-size:1.125rem;line-height:1;flex:none}
.sortie b{display:block;font-size:.875rem;font-weight:600}
.sortie span{display:block;font-size:.6875rem;color:var(--ink-tertiary)}

.transcript{
  margin-top:16px;background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:16px;padding:20px;
}
.transcript h3{font-size:.9375rem;font-weight:600;margin-bottom:14px}
.segments{display:flex;flex-direction:column;gap:4px}
.seg{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  width:100%;text-align:left;padding:10px 12px;border-radius:10px;
  transition:background .2s;
}
.seg:hover{background:var(--surface-soft-hover)}
.seg .ts{
  font-size:.75rem;color:var(--ink-tertiary);font-variant-numeric:tabular-nums;
  padding-top:2px;white-space:nowrap;
}
.seg .tx{font-size:.9375rem;line-height:1.6;color:var(--ink-secondary)}
.seg.on{background:var(--sky-tint)}
.seg.on .ts{color:var(--sky-soft);font-weight:600}
.seg.on .tx{color:var(--ink-primary)}

@media (prefers-reduced-motion: reduce){
  .etat.cours i,.recorder.actif .pastille i{animation:none}
  .wave i,.seg{transition:none}
}

@media (max-width:820px){
  .rec{grid-template-columns:auto minmax(0,1fr) auto}
  .rec .wave{display:none}
  .sorties{grid-template-columns:1fr}
}
@media (max-width:640px){
  .detail-top .lbl{display:none}
  .rec .dur{display:none}
  .recorder{padding:26px 18px}
  .recorder .controls .btn{width:100%}
}