/* Module Diffuseurs : direct (horloge, décomptes, conducteur), tchat régie ↔ diffuseurs, fiche technique. */

.df-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.df-board { display: flex; flex-direction: column; gap: 14px; }
.df-clock { text-align: center; }
.df-time { font-size: 56px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.05; }
.df-zone { color: var(--muted); font-size: 13px; margin-top: 4px; }
.df-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.df-tile { background: var(--panel-hi); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; }
.df-tile-val { font-size: 30px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.df-tile-label { font-size: 12.5px; color: var(--muted); }
.df-tile.next .df-tile-val { color: var(--amber); }
.df-tile.air { border-color: var(--red); box-shadow: 0 0 22px rgba(255, 0, 85, .2); }
.df-tile.air .df-tile-val { color: var(--red); }
.df-tile.cut, .df-tile.soon { border-color: var(--purple); }
.df-tile.cut .df-tile-val, .df-tile.soon .df-tile-val { color: #c79bff; }
.df-tile.done .df-tile-val { color: var(--muted); font-size: 22px; }

.df-rundown { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; position: relative; }
.df-block { font-weight: 700; color: #fff; font-size: 13px; padding: 8px 4px 4px; border-bottom: 1px solid var(--rule); }
.df-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 4px; border-bottom: 1px solid var(--rule); }
.df-item.cur { background: rgba(255, 0, 85, .1); border-left: 3px solid var(--red); padding-left: 6px; }
.df-n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.df-title { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.df-item.cur .df-title { color: #fff; font-weight: 600; }
.df-who { color: var(--muted); font-size: 13px; }
.df-dur, .df-left { font-variant-numeric: tabular-nums; color: var(--muted); }
.df-left { color: #fff; font-weight: 700; }
.df-left.over { color: var(--red); }

.df-chat { display: flex; flex-direction: column; gap: 10px; }
.df-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.df-tab { font: 500 13px Inter, system-ui, sans-serif; color: var(--text); background: var(--panel-hi); border: 1px solid var(--rule); border-radius: 99px;
  padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.df-tab.on { border-color: var(--purple); color: #fff; background: rgba(138, 43, 226, .25); }
.df-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey); }
.df-dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.df-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 0 6px; min-width: 18px; text-align: center; }
.df-msgs { display: flex; flex-direction: column; gap: 6px; height: 280px; overflow-y: auto; padding: 8px; background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; }
.df-msg { max-width: 82%; padding: 6px 10px; border-radius: 10px; background: var(--panel-hi); align-self: flex-start; }
.df-msg.mine { align-self: flex-end; background: rgba(138, 43, 226, .28); }
.df-msg.preset .df-body { font-weight: 700; color: #fff; }
.df-meta { font-size: 11.5px; color: var(--muted); }
.df-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.df-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.df-compose { display: flex; gap: 8px; align-items: flex-end; }
.df-input { flex: 1; min-width: 0; resize: vertical; }

.df-sheet { display: flex; flex-direction: column; }
.df-kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); }
.df-kv:first-child { border-top: 0; }
.df-k { color: var(--muted); font-size: 12.5px; }
.df-v { white-space: pre-wrap; overflow-wrap: anywhere; }
.df-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.df-two-pub { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.df-h2 { font-size: 16px; margin: 0 0 10px; color: #fff; }

@media (max-width: 760px) {
  .df-live { grid-template-columns: 1fr; }
  .df-time { font-size: 44px; }
  .df-kv { grid-template-columns: 1fr; gap: 2px; }
  .df-two { grid-template-columns: 1fr; }
}
.df-tile.over .df-tile-val { color: var(--red); }
.df-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.df-grid > .panel { min-width: 0; }
.df-brow { flex-wrap: wrap; row-gap: 6px; }
.df-brow .grow { flex: 1 1 200px; }
@media (max-width: 900px) { .df-grid { grid-template-columns: 1fr; } }

/* Choix de l'émission (production à plusieurs émissions) */
.df-emtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.df-emtab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 12px; color: var(--text); font: inherit; }
.df-emtab b { color: #fff; font-weight: 600; font-size: 14px; }
.df-emtab span { color: var(--muted); font-size: 12px; }
.df-emtab.on { border-color: var(--purple); background: var(--panel-hi); box-shadow: 0 0 16px rgba(138, 43, 226, .25); }
.df-emtab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }