/* =========================================================
   EduSupVirtuelle — ajouts à la salle de visio reprise d'EduVirtuelle
   (en-tête de la liste des cours, liens d'invitation, saisie du nom)
   ========================================================= */

/* Couleurs de la marque EduSupVirtuelle */
.vz-shell-brand b:nth-child(1) { color: #002352; }
.vz-shell-brand b:nth-child(2) { color: #0066d4; }
.vz-shell-brand b:nth-child(3) { color: #ff6b00; }
[data-theme="dark"] .vz-shell-brand b:nth-child(1) { color: #e6edf9; }

.vz-shell { min-height: 100vh; background: var(--bg); }

.vz-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.vz-shell-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.15rem; }
.vz-shell-brand img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 8px; }
.vz-shell-brand b { font-weight: 800; }

.vz-shell-main { max-width: 1000px; margin: 0 auto; padding: 28px 20px 48px; }

/* Lien d'invitation : champ + bouton Copier */
.vz-linkrow { display: flex; gap: 8px; }
.vz-linkrow .input { flex: 1; min-width: 0; font-size: .9rem; }

/* Saisie du nom à l'arrivée par un lien d'invitation */
.vz-name-label { display: block; text-align: left; font-weight: 600; margin: 14px 0 6px; }
.vz-name-input { width: 100%; font-size: 1.05rem; }
.vz-prejoin .form-alert:empty { display: none; }
.vz-prejoin .field-error { text-align: left; }

/* Logo d'EduSupVirtuelle (image carrée, fond transparent) dans les écrans de la salle */
.vz-prejoin-brand img, .vz-brand img { background: #fff; border-radius: 6px; object-fit: contain; }

@media (max-width: 560px) {
  .vz-linkrow { flex-direction: column; }
  .vz-shell-main { padding: 20px 14px 40px; }
}

/* ---------------------------------------------------------------------------
   Accueil des cours en visio, à la Google Meet : nouvelle réunion + rejoindre
   --------------------------------------------------------------------------- */
.vz-accueil {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 32px;
  padding: 36px;
  margin-bottom: 32px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(600px 300px at 100% 0%, rgb(255 107 0 / 30%), transparent 65%),
    linear-gradient(150deg, #001a3d, #002352 55%, #003b80);
  box-shadow: 0 24px 48px -24px rgb(0 35 82 / 55%);
}

.vz-accueil h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; color: #fff; }
.vz-accueil p { margin: 0; color: #c9d6ee; }
.vz-accueil-actions { display: flex; flex-direction: column; gap: 14px; }

.vz-nouveau { position: relative; }
.vz-nouveau .btn-lg {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 14px 22px;
  border: 0;
  background: linear-gradient(135deg, #ff7a1a, #f05a00);
  box-shadow: 0 12px 28px -10px rgb(255 107 0 / 70%);
}

.vz-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 40%);
  border: 1px solid var(--border);
}

.vz-menu button {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vz-menu button:hover, .vz-menu button:focus-visible { background: var(--surface-2); outline: none; }
.vz-menu span { display: flex; flex-direction: column; }
.vz-menu small { color: var(--text-muted); }

.vz-rejoindre { display: flex; gap: 8px; }
.vz-rejoindre .input { flex: 1; min-width: 0; background: #fff; color: #0f172a; border-color: transparent; font-size: 1rem; }
.vz-rejoindre .btn { color: #fff; border: 1px solid rgb(255 255 255 / 35%); background: rgb(255 255 255 / 10%); }
.vz-rejoindre .btn.btn-primary { background: #fff; color: #002352; border-color: #fff; }
.vz-rejoindre .btn:disabled { opacity: .6; }

.vz-liste-titre { font-size: 1.15rem; margin: 0 0 14px; }
.vz-vide { text-align: center; padding: 18px; }

.vz-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .04em; }
.vz-code-ligne { margin: 14px 0 0; }
.vz-code-grand { font-size: 1.15rem; padding: 2px 10px; border-radius: 8px; background: var(--surface-2); }

@media (max-width: 760px) {
  .vz-accueil { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; gap: 22px; }
}