/* Outils vidéo et audio : aperçu, barre de progression, enregistreurs. */
.v-apercu { display: block; width: 100%; max-height: 440px; border-radius: 16px; background: #0c0c18; object-fit: contain; }
img.v-apercu { width: auto; max-width: 100%; margin: 0 auto; background: var(--soft); }
.v-audio { display: block; width: 100%; }
.v-res { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--soft); }
.v-res .file-row { background: #fff; }

.v-prog { display: grid; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text); }
.v-bar { height: 10px; border-radius: 10px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.v-bar i { display: block; width: 0; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #ff6a70, var(--red-deep)); transition: width .3s var(--ease); }
.v-prog.attente .v-bar i { background: repeating-linear-gradient(110deg, #ff6a70 0 14px, var(--red-deep) 14px 28px); background-size: 200% 100%; animation: v-defile 1.2s linear infinite; }
@keyframes v-defile { to { background-position: -56px 0; } }

.picks.trois { grid-template-columns: repeat(3, 1fr); }
.opts .lab .btn { justify-self: start; }
.opts .tick { margin-right: 0; line-height: 1.35; }

.v-rec { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--soft); }
.v-rec b { flex: 1; font: 700 30px/1 var(--head); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.v-point { width: 14px; height: 14px; border-radius: 50%; background: var(--red); animation: v-bat 1.1s ease-in-out infinite; }
@keyframes v-bat { 50% { opacity: .25; } }
.v-niveau { height: 14px; border-radius: 10px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.v-niveau i { display: block; width: 0; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #45d394, #0f9159); transition: width .08s linear; }

/* Ligne de temps : vignettes ou forme d'onde, deux poignées, curseur de lecture. */
.v-coupe, .v-img, .v-scene { display: grid; gap: 12px; }
.v-lt { padding: 4px 20px; user-select: none; -webkit-user-select: none; }
.v-lt-piste { position: relative; height: 64px; border-radius: 10px; background: #0c0c18; touch-action: none; cursor: pointer; }
.v-lt.onde .v-lt-piste { height: 96px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.v-lt-piste:focus-visible, .v-lt-p:focus-visible, .v-lt-sel:focus-visible, .v-cadre:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.v-lt-fond { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 10px; pointer-events: none; }
.v-lt-hors { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, .74); pointer-events: none; }
.v-lt-hors + .v-lt-hors { right: 0; }
.v-lt.onde .v-lt-hors { background: rgba(244, 244, 248, .82); }
.v-lt-sel { position: absolute; top: 0; bottom: 0; border-block: 4px solid var(--red); cursor: grab; touch-action: none; }
.v-lt.tire .v-lt-sel { cursor: grabbing; }
.v-lt-p { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; width: 20px; padding: 0; border: 0; background: var(--red); cursor: ew-resize; touch-action: none; }
.v-lt-p::before { content: ''; position: absolute; inset: -8px -10px; } /* zone de prise : 40 px de large */
.v-lt-p i { width: 4px; height: 22px; border-radius: 4px; background: #fff; }
.v-lt-d { margin-left: -20px; border-radius: 10px 0 0 10px; }
.v-lt-f { border-radius: 0 10px 10px 0; }
.v-lt-tete { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 12, 24, .55); pointer-events: none; }
.v-lt.onde .v-lt-tete { background: var(--red-deep); box-shadow: none; }
.v-lt.unique { padding: 4px 8px; }
.v-lt.unique .v-lt-piste { cursor: ew-resize; }
.v-lt.unique .v-lt-tete { top: -6px; bottom: -6px; width: 6px; margin-left: -3px; background: var(--red); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(12, 12, 24, .5); }
.v-lt-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v-garde { margin-left: auto; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.v-garde b { color: var(--ink); font-weight: 600; }
.v-pas { width: 46px; padding: 0; font-size: 22px; line-height: 1; }
.v-img .v-apercu { cursor: pointer; }

/* Vidéo verticale : le cadre a la forme du fichier final. */
.v-cadre { position: relative; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #0c0c18; touch-action: none; user-select: none; -webkit-user-select: none; }
.v-cadre.glisse { cursor: grab; }
.v-cadre.glisse.tire { cursor: grabbing; }
.v-cadre-video { position: absolute; max-width: none; object-fit: fill; pointer-events: none; }
.v-cadre-fond { position: absolute; inset: -8%; display: none; width: 116%; height: 116%; filter: blur(9px); }
.v-cadre.flou .v-cadre-fond { display: block; }
.v-cadre-aide { flex: 1; min-width: 0; }
.picks.deux { grid-template-columns: 1fr 1fr; }

/* Vitesse, rotation, assemblage, zones de sécurité. */
.picks.serre { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.picks.serre .pick { padding: 10px; gap: 8px; }
.v-total { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.v-total b { color: var(--ink); font-weight: 600; }
.v-tourne { position: relative; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #0c0c18; }
.v-tourne-video { position: absolute; top: 50%; left: 50%; max-width: none; height: auto; transition: transform .25s var(--ease); }
.v-gestes .btn { flex: 1 1 auto; }
.v-ordre, .picks.serre, .v-ordre .file-name { min-width: 0; }
.v-ordre .file-row { background: #fff; }
.v-ordre .file-row.porte { box-shadow: 0 0 0 2px var(--red), 0 14px 26px -14px rgba(12, 12, 24, .45); }
.v-prise { flex: none; display: grid; align-content: center; gap: 4px; width: 32px; height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: none; cursor: grab; touch-action: none; }
.v-prise i { display: block; height: 2px; border-radius: 2px; background: var(--muted); }
.v-prise:hover, .v-prise:focus-visible { background: var(--soft); }
.v-zones { position: relative; width: min(100%, 290px); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, #4d4d59, #22222c); }
.v-zones-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-zones-calque { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 600px) {
  .picks.trois { grid-template-columns: 1fr; }
  .picks.serre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .picks.serre .pick { padding: 10px 8px; }
  .v-ordre .file-row { gap: 8px; padding-left: 4px; }
  .v-ordre .file-acts .ib:not(:last-child) { display: none; } /* au doigt, on glisse la ligne par sa prise */
  .v-lt-piste { height: 56px; }
  .v-lt.onde .v-lt-piste { height: 80px; }
  .v-garde { font-size: 14px; }
  .v-rec b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-point, .v-prog.attente .v-bar i { animation: none; }
}