/* ============================================================
   Ocleiria Toolbox convertisseur audio (styles)
   ============================================================ */

.tool-page { padding:40px 0 60px; }

.crumb { font-family:var(--font-mono); font-size:.8rem; color:var(--text-secondary);
  display:flex; gap:8px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.crumb a { color:var(--text-secondary); }
.crumb a:hover { color:var(--accent); }
.crumb span { opacity:.5; }
.crumb b { color:var(--text-primary); font-weight:500; }

.tool-head { display:flex; gap:18px; align-items:flex-start; margin-bottom:28px; }
.tool-head__icon { flex:0 0 auto; width:60px; height:60px; border-radius:14px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--border-color); color:var(--accent); }
.tool-head__icon svg { width:30px; height:30px; }
.tool-head h1 { font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:800; }
.tool-head p { color:var(--text-secondary); font-size:1.02rem; margin-top:6px; max-width:620px; }

/* ---------- Layout 2 colonnes ---------- */
.audio { display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
.audio__panel { position:sticky; top:calc(var(--nav-h) + 16px);
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-card);
  padding:20px; box-shadow:var(--shadow-card); }

/* ---------- Zone de dépôt ---------- */
.drop { border:2px dashed var(--border-color); border-radius:var(--radius-card); background:var(--card-bg);
  padding:48px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:var(--transition); }
.drop.is-over { border-color:var(--accent); background:var(--accent-soft); }
.drop > svg { width:48px; height:48px; color:var(--text-secondary); margin-bottom:4px; }
.drop h2 { font-size:1.25rem; }
.drop p { color:var(--text-secondary); max-width:440px; }
.drop .btn { margin-top:12px; }

/* ---------- File d'attente ---------- */
.queue { margin-top:22px; }
.queue__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.queue__head h3 { font-size:1.15rem; }
.queue__list { list-style:none; display:flex; flex-direction:column; gap:10px; }

.row { position:relative; display:grid; grid-template-columns:1fr auto; gap:10px 14px; align-items:center;
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-card);
  padding:14px 16px; overflow:hidden; }
.row__info { min-width:0; display:flex; flex-direction:column; gap:2px; }
.row__name { font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row__meta { font-size:.76rem; color:var(--text-secondary); }
.row__actions { display:flex; align-items:center; gap:8px; }
.row__rm { width:30px; height:30px; border-radius:var(--radius-sm); border:1px solid var(--border-color);
  background:transparent; color:var(--text-secondary); cursor:pointer; font-size:.8rem; transition:var(--transition); }
.row__rm:hover { color:var(--down); border-color:var(--down); }
.row__audio { grid-column:1 / -1; width:100%; height:38px; margin-top:4px; }
.row--error { border-color:var(--down); }
.row--error .row__meta { color:var(--down); }
.row--done { border-color:var(--ok); }

/* barre de progression */
.bar { grid-column:1 / -1; height:4px; border-radius:100px; background:var(--secondary-bg); overflow:hidden; margin-top:2px; }
.bar span { display:block; height:100%; background:var(--accent); width:0; transition:width .2s ease; }
.bar--done span { background:var(--ok); width:100%; }
.bar--converting span { background:var(--accent); }

.queue__actions { display:flex; gap:10px; margin-top:16px; }

/* ---------- Panneau d'options ---------- */
.panel__presets { margin-bottom:18px; }
.panel__label { display:block; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--text-secondary); margin-bottom:8px; }
.presets { display:flex; flex-wrap:wrap; gap:6px; }
.preset { font-family:var(--font-body); font-size:.82rem; padding:6px 12px; border-radius:100px;
  border:1px solid var(--border-color); background:transparent; color:var(--text-secondary); cursor:pointer;
  transition:var(--transition); }
.preset:hover { color:var(--text-primary); border-color:var(--text-secondary); }
.preset.is-active { background:var(--accent-soft); color:var(--accent); border-color:transparent; font-weight:600; }

.field { margin-bottom:14px; }
.field > label { display:block; font-size:.82rem; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.field input[type="text"], .field input[type="number"], .field input[type="password"],
.field input[type="email"], .field input[type="search"], .field input:not([type]) {
  width:100%; font-family:var(--font-body); font-size:.92rem; padding:9px 12px;
  border:1px solid var(--border-color); background:var(--primary-bg); color:var(--text-primary);
  border-radius:var(--radius); transition:var(--transition); }
.field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.select { position:relative; }
.select::after { content:""; position:absolute; right:13px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--text-secondary); border-bottom:2px solid var(--text-secondary);
  transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.select select { width:100%; appearance:none; font-family:var(--font-body); font-size:.92rem;
  padding:9px 34px 9px 12px; border:1px solid var(--border-color); background:var(--primary-bg);
  color:var(--text-primary); border-radius:var(--radius); cursor:pointer; transition:var(--transition); }
.select select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint { font-size:.78rem; color:var(--text-secondary); margin-top:6px; }
.mono { font-family:var(--font-mono); }

input[type="range"] { width:100%; accent-color:var(--accent); cursor:pointer; }

.check { display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--text-primary);
  cursor:pointer; margin-top:6px; }
.check input { accent-color:var(--accent); width:16px; height:16px; }

.adv { border-top:1px solid var(--border-color); padding:12px 0 2px; margin-top:4px; }
.adv > summary { cursor:pointer; font-weight:600; font-size:.9rem; list-style:none; padding:4px 0;
  display:flex; align-items:center; justify-content:space-between; }
.adv > summary::after { content:"+"; font-family:var(--font-mono); color:var(--text-secondary); }
.adv[open] > summary::after { content:"–"; }
.adv[open] { padding-bottom:10px; }
.adv > summary::-webkit-details-marker { display:none; }

.panel__note { font-size:.76rem; color:var(--text-secondary); margin-top:16px; line-height:1.45;
  border-top:1px solid var(--border-color); padding-top:14px; }

@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.reveal { animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }

@media (max-width:900px) {
  .audio { grid-template-columns:1fr; }
  .audio__panel { position:static; order:-1; }
}
@media (prefers-reduced-motion:reduce) { .reveal { animation:none; } }