/* ===================================================================
   STUDIO — feuille de style du socle
   Thème sombre sobre, sans dépendance externe.
   =================================================================== */

:root {
  --bg:        #0f1419;
  --bg-2:      #161c24;
  --bg-3:      #1e2731;
  --border:    #2a3542;
  --text:      #e6edf3;
  --text-dim:  #9aa7b4;
  --accent:    #3b82f6;
  --accent-2:  #2563eb;
  --ok:        #22c55e;
  --err:       #ef4444;
  --log-bg:    #0a0e12;
  --log-text:  #b7f7c2;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours cacher, même quand un display: flex/grid
   est défini par ailleurs (sinon l'écran de connexion resterait affiché). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}

button { font-family: inherit; cursor: pointer; }

/* ---------------- Écran de connexion ---------------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.login-logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 4px;
  text-align: center;
  color: var(--accent);
}
.login-sub {
  margin: 0 0 6px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.login-card input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
}
.login-card button:hover { background: var(--accent-2); }
.login-error {
  margin: 0;
  color: var(--err);
  font-size: 13px;
  text-align: center;
}

/* ---------------- Barre du haut ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  height: 56px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent);
}
.menu {
  display: flex;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}
.menu button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.menu button:hover { color: var(--text); background: var(--bg-3); }
.menu button.active {
  color: var(--text);
  background: var(--bg-3);
  border-color: var(--border);
}
.logout {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.logout:hover { color: var(--err); border-color: var(--err); }

/* ---------------- Contenu ---------------- */
.content { padding: 26px 22px; max-width: 1100px; margin: 0 auto; }
.view h1 { margin: 0 0 6px; font-size: 22px; }
.lead { color: var(--text); font-size: 16px; margin: 0 0 10px; }
.muted { color: var(--text-dim); font-size: 14px; }
.actions { margin: 18px 0; display: flex; gap: 10px; }

.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-danger {
  background: transparent;
  color: var(--err);
  border: 1px solid var(--err);
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
}
.btn-danger:hover { background: var(--err); color: white; }

/* ---------------- Bannières de verdict ---------------- */
.verdict {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  border: 1px solid var(--border);
}
.verdict.ok   { background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.4);  color: #d5f5df; }
.verdict.warn { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.4);  color: #f7d5d5; }

/* ---------------- Tableau de classement ---------------- */
.ranking { overflow-x: auto; margin: 14px 0; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank-table th, .rank-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rank-table th { color: var(--text-dim); font-weight: 600; font-size: 12.5px; }
.rank-table td:first-child { white-space: normal; word-break: break-word; }
.rank-table tr.reco { background: rgba(59,130,246,.10); }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.badge.ok   { background: rgba(34,197,94,.18);  color: #86efac; }
.badge.bad  { background: rgba(239,68,68,.18);  color: #fca5a5; }
.badge.reco { background: rgba(59,130,246,.22); color: #bfdbfe; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---------------- Panneaux ---------------- */
.panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
}
.panel h2 { margin: 0 0 14px; font-size: 16px; color: var(--text); }

/* ---------------- Dropzones ---------------- */
.dropzones { display: flex; gap: 14px; flex-wrap: wrap; }
.dropzone {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 16px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--accent); color: var(--text); }
.dropzone.drag { border-color: var(--accent); background: #1b2a3f; color: var(--text); }
.dz-icon { font-size: 26px; }
.dz-text { font-size: 14px; }

/* ---------------- Barre de progression ---------------- */
.progress {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress-bar {
  height: 8px;
  width: 0%;
  background: var(--accent);
  border-radius: 4px;
  flex: 0 0 auto;
  min-width: 2px;
  transition: width .15s;
}
.progress { position: relative; }
.progress .progress-bar { flex: 1 1 auto; max-width: 60%; }
.progress span { font-size: 13px; color: var(--text-dim); }

/* ---------------- Liste de fichiers ---------------- */
.file-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  word-break: break-all;
}
.file-del {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.file-del:hover { color: var(--err); background: rgba(239,68,68,.12); }

/* ---------------- Case à cocher ---------------- */
.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 2px;
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
}
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---------------- Blocs de résultats ---------------- */
.res-block {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.res-block:last-of-type { border-bottom: none; }
.res-block h3 { margin: 0 0 12px; font-size: 15px; color: var(--text); }

/* ---------------- Lecteur vidéo ---------------- */
#result-video {
  width: 100%;
  max-height: 460px;
  background: #000;
  border-radius: 10px;
  display: block;
}

/* ---------------- Cadre PDF ---------------- */
.pdf-frame {
  width: 100%;
  height: 640px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* ---------------- Zone JSON ---------------- */
.json-area {
  background: var(--log-bg);
  color: #cbd5e1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 340px;
  overflow: auto;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------- Zone de logs ---------------- */
.log-wrap { position: relative; margin-top: 4px; }
.btn-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--bg-3);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
}
.btn-copy:hover { color: var(--text); border-color: var(--accent); }
.log-area {
  background: var(--log-bg);
  color: var(--log-text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 220px;
  max-height: 460px;
  overflow-y: auto;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------- Découpe FLAC ---------------- */
.fc-cover {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 0 auto 14px;
}
.fc-audio { width: 100%; margin-bottom: 6px; }
.fc-pos { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.fc-hms {
  display: inline-block;
  margin-top: 4px;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.5px;
}
.fc-unit { color: var(--text-dim); font-size: 13px; }

/* ---------------- Recadrage vidéo ---------------- */
.cr-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  background: #000;
  border-radius: 10px;
  overflow: hidden;   /* clippe l'assombrissement extérieur du cadre */
}
.cr-video { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.cr-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--accent);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .48);  /* assombrit hors du cadre */
  cursor: move;
  touch-action: none;
}
.cr-handle {
  position: absolute; width: 14px; height: 14px;
  background: var(--accent); border: 2px solid #fff; border-radius: 3px;
}
.cr-handle.tl { left: -8px; top: -8px; cursor: nwse-resize; }
.cr-handle.tr { right: -8px; top: -8px; cursor: nesw-resize; }
.cr-handle.bl { left: -8px; bottom: -8px; cursor: nesw-resize; }
.cr-handle.br { right: -8px; bottom: -8px; cursor: nwse-resize; }
.cr-transport { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cr-transport input[type="range"] { flex: 1; accent-color: var(--accent); }
#cr-play {
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
#cr-play:hover { border-color: var(--accent); }
.cr-controls { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.cr-arrows { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-arrow {
  min-width: 40px; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.cr-arrow:hover { border-color: var(--accent); }
.cr-step { color: var(--text-dim); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cr-step input { width: 70px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; }
.cr-fields { display: flex; gap: 14px; flex-wrap: wrap; }
.cr-fields label { color: var(--text-dim); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cr-fields input {
  width: 100px; background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 8px 10px; font-size: 14px; outline: none;
}
.cr-fields input:focus { border-color: var(--accent); }

/* ---------------- Couper extrait vidéo ---------------- */
.cv-select {
  /*flex: 1 1 260px;*/
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 11px; font-size: 14px; outline: none;
}
.cv-select:focus { border-color: var(--accent); }
.cv-modes { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }

/* ---------------- Nettoyage : encart de liens modèles ---------------- */
.wm-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wm-link-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg-2); }
.wm-link-card h3 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.wm-link-card ul { margin: 8px 0 0; padding-left: 18px; }
.wm-link-card li { margin: 4px 0; }
.wm-link-card a { color: var(--accent); text-decoration: none; }
.wm-link-card a:hover { text-decoration: underline; }
.wm-tag { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.wm-tag.ok { background: rgba(62,196,109,.18); color: #3ec46d; }
.wm-tag.soon { background: rgba(255,255,255,.10); color: var(--text-dim); }

/* ---------------- Comparaison de qualité ---------------- */
.qa-table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.qa-table th, .qa-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.qa-table thead th { color: var(--text-dim); font-weight: 600; }
.qa-table td:first-child { color: var(--text-dim); }
.qa-table td.qa-best { color: #3ec46d; font-weight: 700; }
.qa-conclusion { margin-top: 14px; }
.qa-verdict {
  padding: 12px 14px; border: 1px solid var(--accent); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--bg-2); line-height: 1.5;
}

/* ---------------- Analyseur de couleurs ---------------- */
.co-palette { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
.co-swatch {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums;
}
.co-swatch:hover { border-color: var(--accent); }
.co-swatch.copied { border-color: #3ec46d; }
.co-swatch.sm { padding: 4px 8px 4px 4px; font-size: 13px; }
.co-chip { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); flex: 0 0 auto; }
.co-swatch.sm .co-chip { width: 16px; height: 16px; }
.co-hex { font-weight: 600; }
.co-pct { color: var(--text-dim); }

.co-suggestions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.co-sugg { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.co-preview {
  height: 92px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg,#2a2f37,#2a2f37 10px,#242932 10px,#242932 20px);
}
.co-subtitle { font-size: 22px; font-weight: 800; text-align: center; padding: 0 10px; }
.co-sugg-body { padding: 10px 12px 12px; }
.co-sugg-label { font-weight: 600; margin-bottom: 8px; }
.co-triplet { display: flex; flex-direction: column; gap: 6px; }
.co-scores { margin-top: 8px; font-size: 12.5px; }

/* Boutons de calage fin sous le lecteur (− / + 1 s, 0,5 s, 0,1 s) */
.cv-nudge { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.cv-nudge button {
  flex: 1 1 auto; min-width: 62px; padding: 8px 6px;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.cv-nudge button:hover { border-color: var(--accent); background: var(--bg-2); }
.cv-nudge button:active { transform: translateY(1px); }

/* Barre de progression déterminée (piste + remplissage piloté par width) —
   indépendante de .progress (dont une règle flex écrase le width). */
.cv-prog { margin: 12px 0; display: flex; align-items: center; gap: 12px; }
.cv-prog-track {
  flex: 1 1 auto; height: 10px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.cv-prog-fill {
  height: 100%; width: 0%; background: var(--accent);
  border-radius: 6px 0 0 6px; transition: width .25s ease;
}
.cv-prog span {
  flex: 0 0 auto; font-size: 13px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------------- Barre d'UPLOAD (0→100 % réel, % + ETA au-dessus) ----------------
   Composant propre, indépendant de .progress (dont la règle flex ligne ~262 écrasait
   le width et faisait « démarrer » la barre vers 60 %). Libellés AU-DESSUS de la piste. */
.uprog { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.uprog-info {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.uprog-info .uprog-eta { color: var(--text-dim); opacity: .85; }
.uprog-track {
  height: 10px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.uprog-fill {
  height: 100%; width: 0%; background: var(--accent);
  border-radius: 6px 0 0 6px; transition: width .12s linear;
}

/* Panneau « Préparer l'aperçu » (proxy pour formats non lisibles en web) */
.cv-proxy {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 12px 14px; margin: 4px 0 16px; background: var(--bg-2);
}
.cv-proxy-note { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.cv-proxy-row {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin: 6px 0 10px;
}
.cv-proxy-row label { display: inline-flex; align-items: center; gap: 6px; }
.cv-proxy-row input[type="number"] { width: 68px; }
#cv-proxy-window { font-variant-numeric: tabular-nums; }
.fc-marks {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.fc-mark { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; }
.fc-mark > label { font-size: 13px; color: var(--text-dim); }
.fc-mark-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fc-mark-row input[type="number"] {
  flex: 0 0 130px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 15px;
  outline: none;
}
.fc-mark-row input[type="number"]:focus { border-color: var(--accent); }
.fc-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-title-row label { font-size: 13px; color: var(--text-dim); flex: 0 0 auto; }
.fc-title-row input[type="text"] {
  flex: 1 1 260px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}
.fc-title-row input[type="text"]:focus { border-color: var(--accent); }
.fc-cue-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.fc-cue-item {
  text-align: left;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
}
.fc-cue-item:hover { border-color: var(--accent); color: var(--text); background: #1b2a3f; }

/* Analyse audio → JSON : boutons de liste + champs d'identité */
.btn-small{padding:4px 10px;font-size:.85rem;border-radius:6px;border:1px solid var(--border);
  background:var(--bg-2);color:var(--text);cursor:pointer;margin-left:6px}
.btn-small:hover{background:var(--bg-3)}
.field-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.field-row label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--text-dim)}
.field-row input{padding:6px 8px;border:1px solid var(--border);border-radius:6px;
  background:var(--bg-2);color:var(--text);min-width:200px}

/* Panneau de compression / encodage (Recadrage + Extrait) */
.enc-panel { margin-top: 14px; padding: 12px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 10px; }
.enc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.enc-row > label { font-size: .9rem; color: var(--text-dim); white-space: nowrap; }
/* NE PAS remettre de `flex` avec basis sur .cv-select : ça déforme les listes
   déroulantes en gros blocs (régression connue). On contraint par la largeur. */
.enc-row .cv-select { min-width: 240px; max-width: 360px; }
.enc-hint { font-variant-numeric: tabular-nums; }
.enc-advanced { margin-top: 10px; }
.enc-advanced > summary { cursor: pointer; font-size: .88rem; color: var(--text-dim);
  user-select: none; padding: 2px 0; }
.enc-advanced > summary:hover { color: var(--text); }
.enc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-top: 12px; }
.enc-grid > label { display: flex; flex-direction: column; gap: 4px;
  font-size: .85rem; color: var(--text-dim); }
.enc-grid input, .enc-grid select { padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-3); color: var(--text); }
.enc-note { margin-top: 10px; font-size: .8rem; line-height: 1.45; }

/* Analyse audio : drop zones par rôle (glisser-déposer + clic) */
.an-dz-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.an-dz {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--bg-2); border: 1px dashed var(--border); border-radius: 10px;
  transition: border-color .12s, background .12s;
}
.an-dz:hover { border-color: var(--accent); background: var(--bg-3); }
.an-dz.drag { border-color: var(--accent); border-style: solid; background: #1b2a3f; }
.an-dz.has-file { border-style: solid; }
.an-dz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.an-dz-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.an-dz .uprog { margin-top: 0; }
.an-dz-label { font-size: .92rem; color: var(--text); }
.an-dz-file { font-size: .85rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-dz .file-del { flex: 0 0 auto; }

/* Analyse audio : mémo détaillé de bas de page */
.an-doc h3 { margin: 18px 0 6px; font-size: 1.02rem; color: var(--text); }
.an-doc p { line-height: 1.55; margin: 6px 0; }
.an-doc code { background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; font-size: .86em; }
.an-doc-table-wrap { overflow-x: auto; margin: 10px 0; }
.an-doc-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.an-doc-table th, .an-doc-table td { text-align: left; vertical-align: top; padding: 9px 11px;
  border: 1px solid var(--border); }
.an-doc-table th { background: var(--bg-3); color: var(--text); font-weight: 600; }
.an-doc-table td { color: var(--text-dim); }
.an-doc-table .badge { white-space: nowrap; }
.an-doc .badge { display: inline-block; font-size: .72rem; padding: 2px 7px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim); }
.an-doc .badge.bad { background: #3a1d22; border-color: #7a2e38; color: #ffb3bd; }
.an-doc-details { margin: 8px 0; }
.an-doc-details > summary { cursor: pointer; color: var(--text-dim); padding: 4px 0; user-select: none; }
.an-doc-details > summary:hover { color: var(--text); }
.an-doc-blocks, .an-doc-rel { margin: 8px 0; padding-left: 20px; line-height: 1.5; }
.an-doc-blocks li, .an-doc-rel li { margin: 5px 0; color: var(--text-dim); }
.an-rel { display: inline-block; font-size: .74rem; padding: 1px 7px; border-radius: 10px;
  margin-right: 4px; border: 1px solid var(--border); }
.an-rel.g { background: #16301f; border-color: #2e6a44; color: #9fe6ba; }
.an-rel.o { background: #352610; border-color: #7a5a24; color: #ffd79a; }
.an-rel.w { background: var(--bg-3); color: var(--text-dim); }