html, body {
  margin: 0; height: 100%; background: #000; overflow: hidden;
  overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; /* pas de rebond ni de tirer-pour-rafraîchir */
}

.video-layer {
  position: fixed;
  inset: 0;
  width: 100%;  /* pas 100vw/100vh : sur mobile, ils ne suivent pas la vraie zone visible (barres, encoche) */
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
  transition: opacity .6s ease;
}
.video-layer.visible { opacity: 1; }

/* Au-dessus des vidéos, qui reçoivent un z-index 0/1 à chaque fondu (voir swap() dans player.js). */
#status, #clock { z-index: 2; }

#status {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-family: system-ui, sans-serif;
  background: #000;
}
#status.hidden { display: none; }

#clock {
  position: fixed;
  bottom: calc(.5rem + env(safe-area-inset-bottom));
  right: calc(.5rem + env(safe-area-inset-right));
  color: #0f0;
  font-family: monospace;
  font-size: .9rem;
  background: rgba(0, 0, 0, .4);
  padding: .2rem .4rem;
  border-radius: 4px;
}