/* narrate.css — Narrateur des leçons kit : halo mauve sur le bloc lu
   + DOCK flottant (lecture/pause/progression). Fonctionne avec voix
   (manifeste présent) ou en mode DÉMO sans voix (chorégraphie seule). */

/* ---- Bloc en cours de lecture : halo mauve + scroll ---- */
.kit-lesson-body [data-narrate],
.kit-lesson-body [data-card] {
  scroll-margin-top: 96px;
  border-radius: 14px;
  transition: box-shadow .35s ease, background-color .35s ease;
}
.kit-lesson-body [data-narrate].narrating,
.kit-lesson-body [data-card].narrating {
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .9), 0 0 30px rgba(168, 85, 247, .30);
  background-color: rgba(168, 85, 247, .05);
}

/* ---- Dock narrateur : flottant bas-droite, verre premium ---- */
#narrate-dock {
  position: fixed;
  top: 4.25rem;            /* juste sous la nav sticky (h-14 = 3.5rem), suit la page */
  right: 1rem;             /* dans la marge droite (zone sans texte) */
  z-index: 50;
  display: flex;
  flex-direction: column;  /* 2 lignes : haut = ▶+titre, bas = ⏮ ⏭ */
  gap: .45rem;
  padding: .5rem .55rem;
  border-radius: 16px;
  background: rgba(18, 18, 22, .72);
  border: 1px solid rgba(168, 85, 247, .28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #e9d5ff;
  font: 600 .82rem/1.15 -apple-system, system-ui, sans-serif;
  width: 13.5rem;          /* compact, reste dans la marge */
  max-width: calc(100vw - 2rem);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
#narrate-dock:hover { border-color: rgba(168, 85, 247, .55); }
#narrate-top { display: flex; align-items: center; gap: .5rem; }
#narrate-nav { display: flex; align-items: center; justify-content: center; gap: .6rem; }

/* Bouton lecture / pause (rond, plein mauve) */
#narrate-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .92rem;
  line-height: 1;
  color: #ffffff;
  background: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .16);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#narrate-btn:hover { transform: scale(1.06); }
#narrate-dock[data-state='playing'] #narrate-btn { background: #c084fc; }
#narrate-dock[data-state='waiting'] #narrate-btn {
  background: #c084fc;
  animation: nrtPulse 1.5s ease-in-out infinite;
}
@keyframes nrtPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(192, 132, 252, .30); }
  50%      { box-shadow: 0 0 0 9px rgba(192, 132, 252, .04); }
}

/* Boutons ⏮ / ⏭ : reculer / avancer d'un segment (ligne du bas, pilules ghost) */
#narrate-prev, #narrate-next {
  flex: none;
  width: 56px;
  height: 28px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  line-height: 1;
  color: #d8b4fe;
  background: rgba(168, 85, 247, .12);
  transition: background .18s ease, transform .12s ease, color .18s ease;
}
#narrate-prev:hover, #narrate-next:hover {
  background: rgba(168, 85, 247, .26);
  color: #faf5ff;
  transform: scale(1.06);
}
#narrate-prev:active, #narrate-next:active { transform: scale(.95); }

/* Repliés (idle/done) : on masque la ligne ⏮ ⏭ pour rester compact */
#narrate-dock.is-collapsed #narrate-nav { display: none; }

/* Zone texte : label + barre de progression */
#narrate-meta { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
#narrate-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .01em; color: #e9d5ff;
}
#narrate-prog {
  height: 3px; width: 100%;
  border-radius: 3px; background: rgba(168, 85, 247, .18); overflow: hidden;
}
#narrate-prog > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #a855f7, #e9d5ff);
  transition: width .3s ease;
}

/* État replié (idle / done) : juste le bouton + le label, pas de barre */
#narrate-dock.is-collapsed #narrate-prog { display: none; }

/* Petit bouton masquer (ne pas gêner la révision) */
#narrate-hide {
  flex: none; border: none; background: transparent; cursor: pointer;
  color: #9a8ab0; font-size: .9rem; line-height: 1; padding: .2rem .3rem;
  border-radius: 6px; opacity: .65; transition: opacity .2s, color .2s;
}
#narrate-hide:hover { opacity: 1; color: #e9d5ff; }

@media (prefers-reduced-motion: reduce) {
  .kit-lesson-body [data-narrate].narrating,
  .kit-lesson-body [data-card].narrating { transition: none; }
  #narrate-dock[data-state='waiting'] #narrate-btn { animation: none; }
}
@media (max-width: 560px) {
  #narrate-dock { width: 12rem; }
}