/* R20/AC20.1-AC20.2, AC4.7 — bloc d'upload vidéo commun (shared/_video_uploader).
   Une seule règle de lecture : l'état vit dans [data-state] sur la racine, et
   c'est lui qui décide de ce qu'on voit. Aucun style inline, aucun JS de mise en
   forme. Jetons de design_tokens.css, pas de doré redéfini en dur. */

.vu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Zone de dépôt ────────────────────────────────────────────────────────── */
.vu-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 18px;
  border: 1.5px dashed var(--n-300);
  border-radius: var(--r-md, 12px);
  background: var(--n-50);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.vu-zone:hover,
.vu-zone:focus-visible {
  border-color: var(--gold-400);
  background: var(--gold-50);
  outline: none;
}

/* Retour visuel du glisser-déposer : sans lui, on ne sait pas si la zone
   accepte le fichier qu'on tient. */
.vu-zone.is-dragover {
  border-color: var(--gold-primary);
  border-style: solid;
  background: var(--gold-100);
}

.vu-zone-icon { width: 26px; height: 26px; color: var(--gold-500); }
.vu-zone-title { font-size: 14px; font-weight: 600; color: var(--n-900); }
.vu-zone-or { font-size: 12px; color: var(--n-500); }

.vu-browse {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--gold-fill);
  color: var(--on-gold, #fff);
  text-shadow: var(--on-gold-shadow, 0 1px 2px rgba(60, 44, 10, .45));
  font-size: 13px;
  font-weight: 600;
}

/* Les limites sont annoncées AVANT le choix du fichier, pas découvertes après
   trois minutes de transfert. */
.vu-limits { font-size: 11.5px; color: var(--n-500); margin-top: 2px; }

.vu-input { display: none; }

/* ── Transfert : barre déterminée + annulation ────────────────────────────── */
.vu-progress { display: flex; flex-direction: column; gap: 6px; }
/* `display: flex` l'emporte sur la règle navigateur `[hidden] { display: none }` :
   sans cette ligne, le bloc de progression (et son bouton « Annuler », inopérant
   une fois le fichier chez Mux) restait visible pendant l'encodage. */
.vu-progress[hidden] { display: none; }

.vu-track {
  height: 8px;
  border-radius: 999px;
  background: var(--n-200);
  overflow: hidden;
}

.vu-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gold-fill-deep);
  transition: width .18s linear;
}

.vu-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vu-percent {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-600);
}

.vu-cancel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--n-300);
  background: var(--n-0, #fff);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  color: var(--n-700);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.vu-cancel:hover { border-color: #C24A4A; color: #A93636; }
.vu-cancel svg { width: 12px; height: 12px; }

/* ── Ligne d'état : les trois temps, chacun sa couleur ────────────────────── */
.vu-state {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  min-height: 16px;
}

.vu-detail {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--n-500);
}

.vu[data-state="idle"] .vu-state,
.vu[data-state="idle"] .vu-detail { display: none; }

.vu[data-state="transferring"] .vu-state { color: var(--gold-600); }

/* Encodage : le temps sur lequel on n'a pas la main. Barre indéterminée pour
   dire « ça travaille sans qu'on sache combien il reste », et le détail porte
   la phrase qui autorise à quitter la page. */
.vu[data-state="encoding"] .vu-state { color: var(--gold-600); }
.vu[data-state="encoding"] .vu-state::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--gold-200);
  border-top-color: var(--gold-500);
  border-radius: 50%;
  animation: vu-spin .8s linear infinite;
}

@keyframes vu-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .vu[data-state="encoding"] .vu-state::before { animation-duration: 3s; }
  .vu-bar { transition: none; }
}

.vu[data-state="ready"] .vu-state { color: var(--green); }
.vu[data-state="ready"] .vu-state::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-right: 7px;
  vertical-align: 3px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.vu[data-state="error"] .vu-state { color: #A93636; }
.vu[data-state="error"] .vu-detail { color: #A93636; opacity: .8; }

/* Pendant le travail, la zone reste visible mais n'invite plus au clic : on ne
   veut pas d'un second fichier par-dessus le premier. */
.vu[data-state="transferring"] .vu-zone,
.vu[data-state="encoding"] .vu-zone {
  opacity: .5;
  pointer-events: none;
}

/* ── Variante compacte (pied de modale, ligne de formulaire) ──────────────── */
.vu--compact .vu-zone { padding: 12px 14px; gap: 4px; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.vu--compact .vu-zone-icon { width: 18px; height: 18px; }
.vu--compact .vu-zone-title { font-size: 12.5px; }
.vu--compact .vu-zone-or { display: none; }
.vu--compact .vu-browse { padding: 5px 13px; font-size: 12px; }
.vu--compact .vu-limits { flex-basis: 100%; }

/* Retour Loïc 10/08 — « ça manque de marge/padding quand on a les pourcentages
   d'upload ». Le composant n'a de padding QUE dans sa zone de dépôt : dès que
   l'envoi démarre, la zone disparaît et la barre, le pourcentage et les deux
   lignes d'état se retrouvaient collés aux bords de la modale.
   Pendant l'envoi et l'encodage, le bloc prend donc son propre cadre. */
.vu:not([data-state="idle"]) {
  padding: 14px 16px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-md, 12px);
  background: var(--cream, #FBF9F5);
}
.vu:not([data-state="idle"]) .vu-progress { gap: 8px; }
.vu:not([data-state="idle"]) .vu-detail { margin-top: 2px; }