* { margin:0; padding:0; box-sizing:border-box; }
 
/* ── Fenêtre responsive ── */
.kzd-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #EEEEF5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.13);
  width: 100%;
  display: flex;
  flex-direction: column;
  aspect-ratio: 960 / 660;
}
 
/* ── Titlebar ── */
.kzd-hbar {
  background: #1c2040;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  gap: 10px;
  flex-shrink: 0;
}
.kzd-mac { display: flex; align-items: center; gap: 5px; }
.kzd-mac span {
  width: 10px; height: 10px;
  border-radius: 50%; display: inline-block;
}
.kzd-mr { background:#FF5F57; }
.kzd-mo { background:#FFBD2E; }
.kzd-mg { background:#28C840; }
.kzd-hdiv { flex:1; }
 
.kzd-rec {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 2px 8px 2px 6px;
}
.kzd-rdot {
  width:6px; height:6px;
  border-radius:50%; background:#EF5350;
  animation: kzd-blink 1.4s ease-in-out infinite;
}
@keyframes kzd-blink { 0%,100%{opacity:1} 50%{opacity:.15} }
.kzd-rtxt { font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.3px; }
 
.kzd-eye { display:flex; align-items:center; gap:3px; }
.kzd-eye span { font-size:10px; color:rgba(255,255,255,.35); }
 
/* ── Body ── */
.kzd-body { display:flex; flex:1; overflow:hidden; }
 
/* ── Sidebar ── */
.kzd-sb {
  width: 70px;
  background: #EEEEF5;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; gap: 7px; flex-shrink: 0;
}
.kzd-btn {
  width:56px; background:#fff; border-radius:11px;
  padding:9px 5px 7px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
  position:relative; transition:transform .15s;
  border:1px solid rgba(0,36,89,.06);
}
.kzd-btn:hover { transform:translateY(-1px); }
.kzd-btn.on { background:#513BF1; border-color:#513BF1; }
.kzd-btn.on .kzd-lbl { color:#fff; }
.kzd-btn.on svg * { stroke:#fff !important; }
.kzd-lbl { font-size:8px; color:#6B7280; font-weight:500; text-align:center; line-height:1.2; }
.kzd-badge {
  position:absolute; top:-3px; right:-3px;
  width:13px; height:13px;
  background:#17BF87; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:#002459; font-weight:700;
  border:2px solid #EEEEF5;
}
 
/* ── Zone vidéo principale ── */
.kzd-main {
  flex:1; padding:8px; overflow:hidden;
  position:relative;
}
 
/* Container relatif pour l'animation absolue */
.kzd-stage {
  position:relative;
  width:100%; height:100%;
  border-radius:11px;
  overflow:hidden;
}
 
/* ── Panels animés ── */
.img-wrap {
  position: absolute;
  overflow: hidden;
  border-radius: 11px;
  background: #000;
  box-shadow: 0 4px 16px rgba(0,36,89,.18);
  will-change: top, left, width, height;
}
.img-wrap img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}
 
/* Overlays */
.panel-overlay { position:absolute; inset:0; pointer-events:none; }
 
.kzd-overlay-grad {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,10,30,.55) 0%, transparent 45%);
}
 
.kzd-live-badge {
  position:absolute; top:9px; right:9px;
  display:flex; align-items:center; gap:3px;
  background:rgba(239,83,80,.9);
  border-radius:4px; padding:3px 7px;
  font-size:8px; color:#fff; font-weight:700; letter-spacing:.5px;
  z-index:2; opacity:0; transition:opacity .4s ease;
}
.kzd-live-dot { width:5px; height:5px; background:#fff; border-radius:50%; animation:kzd-blink 1s infinite; }
 
.kzd-flbl-main {
  position:absolute; bottom:9px; left:0; right:0;
  text-align:center;
  font-size:11px; font-weight:600; color:rgba(255,255,255,.85);
  letter-spacing:.4px; z-index:2;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  opacity:1; transition:opacity .4s ease;
}
.kzd-flbl-thumb {
  position:absolute; bottom:0; left:0; right:0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
  padding:28px 10px 8px;
  color:rgba(255,255,255,.9); font-size:10px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  opacity:0; transition:opacity .5s ease; z-index:2;
}
 
/* Indicateur micro (main uniquement) */
.kzd-mic {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; gap:3px; align-items:center; z-index:3;
  opacity:1; transition:opacity .4s ease;
}
.kzd-tk { width:3px; border-radius:3px; background:#17BF87; animation:kzd-tk 1.2s ease-in-out infinite; }
.kzd-tk:nth-child(1){height:6px;animation-delay:0s}
.kzd-tk:nth-child(2){height:13px;animation-delay:.2s}
.kzd-tk:nth-child(3){height:9px;animation-delay:.1s}
.kzd-tk:nth-child(4){height:15px;animation-delay:.3s}
.kzd-tk:nth-child(5){height:7px;animation-delay:.15s}
@keyframes kzd-tk {
  0%,100%{transform:scaleY(.4);opacity:.4}
  50%{transform:scaleY(1);opacity:1}
}
 
/* État thumbnail */
.img-wrap.is-thumb .kzd-live-badge { opacity:1; }
.img-wrap.is-thumb .kzd-flbl-thumb { opacity:1; }
.img-wrap.is-thumb .kzd-flbl-main  { opacity:0; }
.img-wrap.is-thumb .kzd-mic        { opacity:0; }
 
/* ── Barre du bas ── */
.kzd-bot {
  height:52px; background:#EEEEF5;
  display:flex; align-items:center; padding:0 14px;
  position:relative; flex-shrink:0;
  border-top:1px solid rgba(0,36,89,.08);
}
.kzd-lay { display:flex; gap:5px; }
.kzd-lb {
  width:38px; height:38px; background:#fff; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 3px 9px rgba(0,0,0,.07);
  border:1px solid rgba(0,36,89,.06);
}
.kzd-lb.on { background:#513BF1; border-color:#513BF1; }
 
.kzd-calls {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; align-items:center;
}
.kzd-cb {
  width:38px; height:38px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 3px 9px rgba(0,0,0,.07);
  border:1px solid rgba(0,36,89,.06);
}
.kzd-cb.end { background:#EF5350; border-color:#EF5350; }