.webcam-body {
  flex: 1 1 auto;
  display: flex;
  gap: 1vw;
  min-height: 0;
}

.webcam-selector {
  /* Taille compacte des vignettes, 6vh en plein écran. Passer par une variable
     plutôt que de redéclarer width évite que la règle plein écran (plus
     spécifique) ne l'emporte sur l'étirement au focus défini plus bas. */
  --tile-size: 4vh;

  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  width: var(--tile-size);
}

.widget.is-fullscreen .webcam-selector {
  --tile-size: 6vh;
}

/* Focus sur n'importe quelle vignette : tout le panneau s'étire d'un bloc,
   pour que les libellés complets soient tous lisibles en même temps — et non
   seulement celui de la vignette focalisée. La largeur est bornée en % du
   corps du widget, pour garder de la place au lecteur vidéo quelle que soit
   la longueur des libellés. */
.webcam-selector:focus-within {
  width: max-content;
  max-width: 55%;
}

.webcam-tile {
  flex: 0 0 auto;
  width: 100%;
  height: var(--tile-size);
  border-radius: 8px;
  border: 2px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: var(--font-size-small);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.webcam-selector:focus-within .webcam-tile {
  justify-content: flex-start;
  padding: 0 0.6vw;
}

.webcam-tile.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.webcam-tile.has-poster {
  background-size: cover;
  background-position: center;
}

.webcam-tile.has-poster.is-active {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.webcam-tile:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Libellé court (initiales) et libellé complet ne sont jamais affichés
   ensemble : panneau compact = initiales, panneau étiré = libellés entiers. */
.webcam-tile-icon {
  flex: 0 0 auto;
}

.webcam-tile-label {
  flex: 0 0 auto;
  display: none;
}

.webcam-selector:focus-within .webcam-tile-icon {
  display: none;
}

.webcam-selector:focus-within .webcam-tile-label {
  display: inline;
}

/* Lisibilité du libellé sur une vignette à fond photo (poster). */
.webcam-tile.has-poster .webcam-tile-label {
  background: rgba(11, 15, 20, 0.75);
  padding: 0.2vh 0.4vw;
  border-radius: 4px;
}

.webcam-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.webcam-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.webcam-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1vh;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.webcam-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6vh 1vw;
  background: rgba(11, 15, 20, 0.75);
  color: var(--color-danger);
  font-size: var(--font-size-small);
  text-align: center;
}

/* Téléphone (voir base.css, COMPACT_QUERY) : le lecteur n'a plus de quadrant
   à remplir en hauteur, donc plus de raison de s'étirer jusqu'à occuper tout
   l'espace vertical disponible — un format d'image fixe lui donne une
   hauteur intrinsèque, sensée quelle que soit la hauteur du reste de la page. */
@media (max-width: 820px) {
  .webcam-body {
    align-items: flex-start;
  }

  .webcam-viewport {
    aspect-ratio: 4 / 3;
  }
}