/* ============================================================
   Ocleiria Toolbox découpe audio (styles spécifiques)
   Ne redéfinit aucun token ni classe déjà présente dans audio.css
   ============================================================ */

.cutter {
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:var(--radius-card); padding:22px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:16px;
}

.cutter__file { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cutter__name { font-size:.9rem; color:var(--text-primary); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0; }

.cutter__player { display:block; width:100%; height:44px; margin:2px 0; }

/* ---------- Forme d'onde + double poignée de découpe ---------- */
.range { position:relative; height:96px; margin:2px; touch-action:none; }
.range__wave {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:var(--secondary-bg); border:1px solid var(--border-color);
  border-radius:var(--radius);
}
.range__sel {
  position:absolute; top:1px; bottom:1px; left:0; width:0;
  background:var(--accent-soft); border-left:2px solid var(--accent);
  border-right:2px solid var(--accent); border-radius:2px; pointer-events:none;
}
.range input[type="range"] {
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:100%; height:72px; margin:0;
  -webkit-appearance:none; appearance:none;
  background:transparent; pointer-events:none;
}
.range input[type="range"]:focus { outline:none; }
/* poignées hautes façon éditeur, seules cliquables (les deux inputs se chevauchent) */
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:12px; height:72px; border-radius:6px;
  background:var(--accent); border:2px solid var(--card-bg);
  box-shadow:0 2px 8px rgba(27,26,23,.35); cursor:ew-resize;
}
.range input[type="range"]::-webkit-slider-thumb:active { cursor:grabbing; }
.range input[type="range"]::-moz-range-thumb {
  pointer-events:auto; width:12px; height:72px; border-radius:6px;
  background:var(--accent); border:2px solid var(--card-bg);
  box-shadow:0 2px 8px rgba(27,26,23,.35); cursor:ew-resize;
}
.range input[type="range"]::-webkit-slider-runnable-track { background:transparent; height:100%; }
.range input[type="range"]::-moz-range-track { background:transparent; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--accent-soft); }
.range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow:0 0 0 4px var(--accent-soft); }

/* ---------- Ligne des temps + aperçu ---------- */
.cutter__times { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.tfield { display:inline-flex; align-items:center; gap:8px; font-size:.82rem;
  font-weight:500; color:var(--text-secondary); }
.tfield input {
  width:88px; font-family:var(--font-mono); font-size:.9rem; text-align:center;
  padding:8px 10px; border:1px solid var(--border-color); background:var(--primary-bg);
  color:var(--text-primary); border-radius:var(--radius); transition:var(--transition);
}
.tfield input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.cutter__dur { text-align:center; font-size:.82rem; color:var(--text-secondary); }

.cutter__out { display:flex; flex-direction:column; gap:6px; }
.cutter__out > label { font-size:.82rem; font-weight:500; color:var(--text-secondary); }

.cutter__actions { display:flex; align-items:center; gap:14px; }
.cutter__actions .bar { flex:1 1 auto; grid-column:auto; margin-top:0; }

/* ---------- Résultat ---------- */
.result {
  border:1px solid var(--border-color); border-radius:var(--radius-card);
  background:var(--primary-bg); padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.result__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result__head span { font-size:.82rem; color:var(--text-secondary); }

.cutter__err { color:var(--down); font-size:.88rem; }

@media (max-width:560px) {
  .cutter__times { gap:10px; }
  .tfield input { width:74px; }
}