/* ============================================================
   Ocleiria Toolbox  styles communs des outils Vidéo
   Réutilise style.css + audio.css (.drop, .tool-head, .crumb,
   .field, .select, .btn*, .bar, .mono, .reveal).
   ============================================================ */

.vid { display:flex; flex-direction:column; gap:20px; }
.vid > section { display:flex; flex-direction:column; gap:18px; }

.vid-file { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:14px; border-bottom:1px solid var(--border-color); }
.vid-file__name { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vid-file__name::before { content:""; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--accent); }

/* Lecteur */
.vid-stage { display:flex; justify-content:center; background:#000; border:1px solid var(--border-color);
  border-radius:var(--radius-card); overflow:hidden; }
.vid-stage video { display:block; width:100%; max-height:60vh; background:#000; }

/* Options */
.opts { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.opts .field { margin:0; min-width:170px; }
.opts .field--grow { flex:1 1 220px; }
.check { display:inline-flex; align-items:center; gap:9px; font-size:.9rem; cursor:pointer; }
.check input { accent-color:var(--accent); width:16px; height:16px; }
.range-row { display:flex; align-items:center; gap:12px; }
.range-row input[type="range"] { flex:1; accent-color:var(--accent); }
.range-row .mono { min-width:56px; text-align:right; }

/* Découpe : double poignée sur une barre */
.vtrim { position:relative; height:38px; margin:2px 2px 0; touch-action:none; }
.vtrim__track { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:8px; border-radius:100px; background:var(--secondary-bg); border:1px solid var(--border-color); }
.vtrim__sel { position:absolute; top:50%; transform:translateY(-50%); height:8px; left:0; width:0;
  background:var(--accent); border-radius:100px; }
.vtrim input[type="range"] { position:absolute; left:0; top:0; width:100%; height:100%; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; }
.vtrim input[type="range"]:focus { outline:none; }
.vtrim input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--card-bg);
  box-shadow:0 1px 4px rgba(27,26,23,.3); cursor:ew-resize; }
.vtrim input[type="range"]::-moz-range-thumb { pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:var(--accent); border:2px solid var(--card-bg); box-shadow:0 1px 4px rgba(27,26,23,.3); cursor:ew-resize; }
.vtrim input[type="range"]::-webkit-slider-runnable-track { background:transparent; height:100%; }
.vtrim input[type="range"]::-moz-range-track { background:transparent; }
.vtrim-times { display:flex; align-items:end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.vtrim-times .tfield { display:inline-flex; flex-direction:column; gap:5px; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-secondary); }
.vtrim-times .tfield input { width:110px; font-family:var(--font-mono); font-size:.95rem; text-align:center;
  padding:8px 10px; border:1px solid var(--border-color); background:var(--primary-bg); color:var(--text-primary);
  border-radius:var(--radius); }
.vtrim-times .tfield input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* Actions / progression / résultat */
.actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.actions .bar { flex:1 1 auto; grid-column:auto; margin-top:0; }
.loading { display:flex; align-items:center; gap:10px; justify-content:center;
  color:var(--text-secondary); font-size:.9rem; padding:6px 0; }
.spinner { width:20px; height:20px; border-radius:50%;
  border:2px solid var(--border-color); border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.result { border:1px solid var(--ok); border-radius:var(--radius-card);
  background:color-mix(in srgb, var(--ok) 7%, var(--card-bg)); padding:18px;
  display:flex; flex-direction:column; gap:12px; }
.result__head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.result__head b { font-size:1rem; }
.result__head span { font-size:.82rem; color:var(--text-secondary); font-family:var(--font-mono); }

.vid-err { color:var(--down); font-size:.9rem; padding:12px 14px; border:1px solid var(--down);
  border-radius:var(--radius); background:color-mix(in srgb, var(--down) 8%, transparent); }

.panel__note { font-size:.78rem; color:var(--text-secondary); }