/* ═══════════════════════════════════════════════════════════════════════════
   Enregistrements : bibliothèque, création, fiche détail, découpe
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-sm { height: 40px; padding: 0 15px 0 12px; font-size: 14px; border-radius: 13px; }
.section-title.plain { margin-top: 20px; }
.rec-btn { color: var(--live); }
.onair[data-state="offline"] .rec-btn, .onair[data-state="starting"] .rec-btn { display: none; }

/* Raccourcis de création */
.rec-shortcuts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.shortcut {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px;
  text-align: left;
  transition: transform .15s var(--ease), border-color .2s;
}
.shortcut:active { transform: scale(.97); }
.shortcut:hover { border-color: var(--line-2); }
.shortcut-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.shortcut-ic.rec { background: var(--live-soft); color: var(--live); }
.shortcut-ic.blue { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
.shortcut strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.shortcut small { display: none; font-size: 12.5px; color: var(--text-3); }

/* En cours / programmés */
.rec-active { display: grid; gap: 10px; }
.job {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center;
  padding: 14px;
}
.job-ic {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.job.recording .job-ic { background: var(--live-soft); color: var(--live); }
.job.recording .job-ic .ic { animation: pulse 1.4s ease-in-out infinite; }
.job.transfer .job-ic { background: rgba(56, 189, 248, .14); color: #7dd3fc; }
.job-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.job-meta { grid-column: 2; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-btn { grid-row: span 2; grid-column: 3; grid-row-start: 1; }
.job-bar { grid-column: 1 / -1; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.job-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--live); transition: width 1s linear; }
.job.transfer .job-bar i { width: 40%; background: #38bdf8; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Outils : recherche + filtre */
.rec-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.seg button {
  height: 36px; padding: 0 14px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 650;
  color: var(--text-2);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.seg button.active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.seg-block { display: grid; width: 100%; }

/* Bibliothèque */
.rec-grid { display: grid; gap: 4px; margin-top: 12px; }
.rcard {
  position: relative;
  display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center;
  padding: 8px;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.rcard:hover { background: var(--surface); }
.rcard:active { background: var(--surface-2); }
.rthumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #161618;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text-3);
}
.rthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rthumb .dur {
  position: absolute; right: 5px; bottom: 5px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .78);
  font-size: 11px; font-weight: 700;
}
.rthumb .loc {
  position: absolute; left: 5px; top: 5px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .7);
  color: #7dd3fc;
}
.rthumb .loc .ic { width: 13px; height: 13px; }
.rbody { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rname {
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rmeta { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbadges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  background: var(--surface-2); color: var(--text-2);
}
.badge .ic { width: 11px; height: 11px; stroke-width: 2.2; }
.badge.err { background: rgba(229, 72, 77, .15); color: #fb7185; }
.badge.warn { background: rgba(245, 158, 11, .15); color: #fbbf24; }
.badge.ok { background: rgba(34, 197, 94, .14); color: #4ade80; }
.badge.info { background: rgba(56, 189, 248, .14); color: #7dd3fc; }

/* Stockage */
.storage { margin-top: 24px; padding: 16px; display: grid; gap: 16px; }
.meter-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; }
.meter-head .ic { width: 16px; height: 16px; color: var(--text-2); }
.meter-head span { margin-left: auto; font-weight: 500; color: var(--text-2); font-size: 12.5px; }
.meter-bar { height: 6px; margin-top: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 6px; background: var(--text-2); transition: width .6s var(--ease); }
.meter-bar i.warn { background: var(--warn); }
.meter-bar i.crit { background: var(--live); }
.meter-sub { margin-top: 6px; font-size: 12px; color: var(--text-3); }

/* ── Formulaire « nouvel enregistrement » ─────────────────────────────────── */

.sheet-form { text-align: left; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.sheet-form .sheet-title { margin: 4px 0 16px; }
.form-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; min-width: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-label { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.form-label small { font-weight: 500; color: var(--text-3); margin-left: 4px; }
.input {
  width: 100%; height: 50px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line-2);
  font-size: 16px;
  outline: none;
  color-scheme: dark;
  min-width: 0;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: rgba(255, 255, 255, .32); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.input::placeholder { color: var(--text-3); }
.form-hint { min-height: 20px; margin: 12px 2px; font-size: 12.5px; color: var(--text-3); }
.form-hint.err { color: #fb7185; font-weight: 500; }

.dur-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dur-chips button {
  height: 38px; padding: 0 14px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 650; color: var(--text-2);
  transition: background .2s, color .2s, border-color .2s;
}
.dur-chips button.active { background: #f5f5f4; border-color: #f5f5f4; color: #0a0a0b; }
#new-custom { margin-top: 2px; }

/* Sélecteur de chaîne */
.picker-value {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 8px 12px 8px 8px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line-2);
  text-align: left;
}
.picker-value .ch-logo { width: 40px; height: 40px; border-radius: 12px; }
.picker-value .pv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.picker-value strong { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-value small { font-size: 12px; color: var(--text-3); }
.picker-value em { font-style: normal; font-size: 13px; font-weight: 650; color: var(--accent-ink); }
.picker-value.empty strong { color: var(--text-3); font-weight: 500; }
.picker-pop { margin-top: 8px; }
.picker-list {
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  margin-top: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .25);
}
.picker-list .ch { min-height: 54px; border-radius: 0; padding: 5px 10px; }
.picker-list .ch-logo { width: 38px; height: 38px; border-radius: 11px; }
.picker-list .ch + .ch::before { left: 60px; }
.picker-empty { padding: 18px; text-align: center; font-size: 13.5px; color: var(--text-3); }

/* ── Fiche détail ─────────────────────────────────────────────────────────── */

.sheet-wide {
  max-width: 820px;
  padding: 0;
  text-align: left;
  max-height: 94dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet-wide::before { z-index: 3; background: rgba(255, 255, 255, .35); }
.sheet-wide .sheet-close { z-index: 3; background: rgba(0, 0, 0, .55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.detail-media { position: relative; background: #000; aspect-ratio: 16 / 9; flex-shrink: 0; max-height: 52dvh; width: 100%; }
.detail-media video, .detail-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.detail-media .media-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); font-size: 13.5px; text-align: center; padding: 20px; background: radial-gradient(120% 120% at 50% 0%, #141416, #0a0a0b 70%); }
.detail-media .media-empty .ic { width: 30px; height: 30px; color: var(--text-3); }
.detail-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px calc(20px + var(--safe-b)); }
.detail-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.detail-meta { margin-top: 5px; font-size: 13.5px; color: var(--text-2); }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.detail-badges .badge { height: 23px; font-size: 11px; }
.note {
  display: flex; gap: 9px;
  margin-top: 12px; padding: 11px 13px;
  border-radius: 12px;
  background: rgba(229, 72, 77, .1);
  border: 1px solid rgba(229, 72, 77, .25);
  color: #fda4af;
  font-size: 13px; line-height: 1.45;
}
.note .ic { width: 16px; height: 16px; margin-top: 1px; }

.actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.act {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 650;
  text-align: left;
  transition: background .2s, transform .15s var(--ease), border-color .2s, color .2s;
}
.act:hover { background: var(--surface-3); }
.act:active { transform: scale(.97); }
.act .ic { width: 18px; height: 18px; color: var(--text-2); }
.act.primary { background: var(--grad); border-color: transparent; color: #0a0a0b; }
.act.primary .ic { color: #0a0a0b; }
.act.danger { color: #fda4af; }
.act.danger .ic { color: #fb7185; }
.act.danger.confirm { background: var(--live); border-color: var(--live); color: #fff; }
.act.danger.confirm .ic { color: #fff; }
.act[disabled] { opacity: .5; pointer-events: none; }
.act.wide { grid-column: 1 / -1; }

.panel-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px -8px; }
.panel-head h3 { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.panel-row { display: flex; gap: 8px; }
.panel-row .input { flex: 1; }
.log {
  max-height: 44dvh; overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: #070708;
  border: 1px solid var(--line);
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #b4b4bb;
  white-space: pre-wrap; word-break: break-all;
}

/* Découpe */
.trim-timeline { position: relative; height: 46px; margin: 6px 12px 4px; touch-action: none; cursor: pointer; }
.trim-track { position: absolute; left: 0; right: 0; top: 18px; height: 10px; border-radius: 6px; background: var(--surface-3); }
.trim-sel { position: absolute; top: 18px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.trim-head { position: absolute; top: 12px; width: 2px; height: 22px; margin-left: -1px; border-radius: 2px; background: #fff; pointer-events: none; }
.trim-handle {
  position: absolute; top: 5px;
  width: 22px; height: 36px; margin-left: -11px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  cursor: ew-resize;
  touch-action: none;
}
.trim-handle::after { content: ""; position: absolute; left: 9px; top: 11px; width: 4px; height: 14px; border-left: 1.5px solid #8a8a92; border-right: 1.5px solid #8a8a92; }
.trim-handle::before { content: ""; position: absolute; inset: -8px -10px; }
.trim-scale { display: flex; justify-content: space-between; margin: 0 12px; font-size: 11px; color: var(--text-3); }
.trim-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.trim-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trim-field .panel-row .input { height: 44px; padding: 0 10px; font-variant-numeric: tabular-nums; text-align: center; }
.mark { display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 11px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.mark .ic { width: 14px; height: 14px; }
.trim-summary { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.trim-summary strong { color: var(--text); }
.busy { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px; color: var(--text-2); font-size: 14px; }
.busy .spinner { width: 24px; height: 24px; border-width: 2.5px; }

/* ── Tablette / ordinateur ────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .shortcut { flex-direction: row; align-items: center; padding: 16px; }
  .shortcut small { display: block; }
  .rec-tools { flex-direction: row; align-items: center; }
  .rec-tools .search { flex: 1; }
  .rec-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 16px; }
  .rcard { grid-template-columns: 1fr; gap: 10px; padding: 0 0 6px; align-items: start; }
  .rcard:hover { background: none; }
  .rthumb { border-radius: 16px; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
  .rcard:hover .rthumb { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); }
  .rbody { padding: 0 4px; }
  .rthumb .dur { right: 8px; bottom: 8px; font-size: 11.5px; }
  .rthumb .loc { left: 8px; top: 8px; }
  .storage { grid-template-columns: 1fr 1fr; gap: 28px; padding: 20px; }
  .rec-active { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .sheet-wide { max-height: 90dvh; }
  .detail-scroll { padding: 22px 24px 24px; }
  .actions { grid-template-columns: repeat(3, 1fr); }
  .sheet-form { max-width: 480px; }
}

/* Dans cet onglet, le lecteur ne s'affiche que s'il y a un direct (et en format réduit sur ordinateur) */
.app[data-route="enregistrements"]:not(.is-live) .stage { display: none; }
.app[data-route="enregistrements"]:not(.is-live) .view { margin-top: 0; }
@media (min-width: 1000px) {
  .app[data-route="enregistrements"] .stage { max-width: 520px; }
}

/* Fiche détail : rangée d'outils compacts + actions principales */
.tools {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  margin-top: 16px;
}
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; height: 60px; padding: 0 2px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text-2);
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.tool span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .ic { width: 19px; height: 19px; color: var(--text); }
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool:active { transform: scale(.95); }
.tool[disabled] { opacity: .45; pointer-events: none; }

.actions-main { grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.actions-main .act { justify-content: center; min-height: 44px; font-size: 13.5px; }
.actions-main .act.danger { background: transparent; border-color: var(--line); }
.actions-main .act.danger:hover { background: var(--live-soft); }
.actions-main .act.danger.confirm { background: var(--live); border-color: var(--live); }
@media (min-width: 640px) {
  .actions-main { display: flex; justify-content: flex-end; }
  .actions-main .act { min-height: 40px; padding: 0 16px; }
  .actions-main .act.primary { flex: 1; }
  .tool { height: 64px; font-size: 11.5px; }
}
/* Téléphone : outils en grille 3 colonnes, icône et libellé côte à côte (libellés entiers) */
@media (max-width: 639px) {
  .tools { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool { flex-direction: row; gap: 7px; height: 44px; font-size: 12.5px; }
  .tool .ic { width: 17px; height: 17px; }
}
@media (max-width: 359px) { .tool { font-size: 11.5px; gap: 5px; } .tool .ic { width: 15px; height: 15px; } }