/**
 * WEBORAMAX Visio — CSS STRUCTUREL NEUTRE du rendu cœur (D16).
 * Uniquement la géométrie et le fonctionnement : disposition des deux
 * postes, écrans en zones découpées, commandes, repli. AUCUNE décoration
 * (couleurs, ombres, images) — l'habillage est porté par la couche skin
 * (assets/skins/{skin}/skin.css). Tout skin du catalogue futur (D17) se
 * pose sur cette même structure.
 */

.wbx-visio {
  padding: 20px;
}

.wbx-visio__postes {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.wbx-visio__poste {
  width: 320px;
  padding: 16px;
}

/* Écran : zone découpée accueillant flux vidéo (puis neige, mire ou médias
   de repos aux lots suivants) */
.wbx-visio__ecran {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wbx-visio__ecran video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wbx-visio__etiquette {
  text-align: center;
  margin-top: 10px;
}

/* Zone de commandes (catalogue §8) */
.wbx-visio__commandes {
  text-align: center;
}

.wbx-visio__statut {
  text-align: center;
  margin-top: 20px;
}

.wbx-visio__bouton {
  display: block;
  margin: 10px auto;
  padding: 10px 24px;
  cursor: pointer;
}

.wbx-visio__bouton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Repli vers le formulaire de contact */
.wbx-visio__repli {
  text-align: center;
  margin-top: 10px;
}

/* Plaque constructeur (branding D13, version gratuite) */
.wbx-visio__plaque {
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
}