html,
body {
  margin: 0;
  height: 100%;
}

.screen {
  /* aspect-ratio: 16 / 9; */
  height: 100%; 
  display: flex;
  flex-direction: column;
}

.top-row {
  display: flex;
  height: 50%;
  aspect-ratio: 16 / 9;
}
#preview {
	        background: black;
}

#live {
	        background: black;
}

#preview video {
  height: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
/*  height: 100%;*/
  object-fit: cover; /* ou contain */
}

#live video {
  height: 100%;
  width: 100%; 
  aspect-ratio: 16 / 9;
/*  height: 100%;*/
  object-fit: cover; /* ou contain */
}




/*
#camera-gauche {
  width: 220px;
  aspect-ratio: 16 / 9;
}

#camera-gauche canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
*/
.tv-box {
  width: 50%;
  border: 4px solid white;
  box-sizing: border-box;
  position: relative;
}

.bottom-row {
  height: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.small-box {
  /* border: 2px solid white;*/
  border: 4px solid white;
  box-sizing: border-box;
  position: relative;
}

.small-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.label-box {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);

  color: white;
  background: #555;
  border: 4px solid white;

  padding: 3px 10px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  z-index: 30;
/*  font-weight: bold; */

  border-radius: 3px;
}

.bottom-buttons {
  height: 100px;
}

#pc-x,#pc-local {
	background: black;
}

/*
.live, .sources {
  display: flex;
#  gap: 20px;
}

.box-tv {
  width: 500%;
  aspect-ratio: 16 / 9;
  border: 3px solid white;
}
*/


.preview-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 20;
}

.fade-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  z-index: 5;
}

.fade-video {
  opacity: 1;
}

/*
 * TEST FADING
 */

#preview,
#live {
    position: relative;
    overflow: hidden;
}


#black {
  position: absolute;
  inset: 0;
  background: black;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

.live-wrapper {
  position: relative;
  overflow: hidden;
    width: 50%;
  border: 4px solid white;
  box-sizing: border-box;
  position: relative;
}

#live {
  width: 100%;
  height: 100%;
  background: black;
  position: relative;
  overflow: hidden;
}