/*
 * Solutech Hospitality : mise en page de l'écran TV (voir screen.js). Tailles en vh : l'écran garde
 * ses proportions sur une TV 1080p ou 4K comme dans le cadre 16:9 de l'aperçu.
 */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0f1216;
}

.tv {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--tv-bg);
  color: var(--tv-text);
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.tv-font-classic { font-family: "Noto Serif", Georgia, "Times New Roman", serif; }
.tv-font-light { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }

.tv-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.tv-shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}
.tv-has-photo .tv-shade { opacity: var(--tv-overlay); }
/* Sans photo, le modèle Photo garde de la profondeur avec un dégradé de la couleur de fond. */
.tv-layout-photo:not(.tv-has-photo) .tv-bg {
  background: radial-gradient(120vh 90vh at 25% 20%, rgba(255, 255, 255, 0.14), transparent 70%), var(--tv-bg);
}

.tv-stage {
  position: absolute;
  inset: 0;
  padding: 7vh 8vh;
  box-sizing: border-box;
  display: grid;
  transition: transform 2s ease;
}

.tv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 9vh;
}
.tv-logo {
  max-height: 9vh;
  max-width: 40vh;
  object-fit: contain;
}
.tv-clock {
  margin-left: auto;
  font-size: 4.2vh;
  font-weight: 300;
  color: var(--tv-muted);
  letter-spacing: 0.02em;
}

.tv-qr {
  background: var(--tv-card);
  border-radius: 2.2vh;
  padding: 2.2vh;
  box-shadow: 0 1.5vh 5vh rgba(0, 0, 0, 0.28);
  width: 40vh;
  height: 40vh;
  box-sizing: content-box;
}
.tv-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tv-qr-small .tv-qr { width: 30vh; height: 30vh; }
.tv-qr-large .tv-qr { width: 52vh; height: 52vh; }

.tv-title {
  margin: 0 0 3vh;
  font-size: 7.4vh;
  line-height: 1.1;
  font-weight: 600;
}
.tv-font-light .tv-title { font-weight: 300; }
.tv-message {
  margin: 0;
  font-size: 3.4vh;
  line-height: 1.45;
  color: var(--tv-muted);
  white-space: pre-line;
}
.tv-message::before {
  content: "";
  display: block;
  width: 8vh;
  height: 0.5vh;
  border-radius: 0.25vh;
  background: var(--tv-accent);
  margin-bottom: 3vh;
}
.tv-footer {
  font-size: 2.8vh;
  color: var(--tv-muted);
  white-space: pre-line;
}

/* Côte à côte : QR à gauche, textes à droite. */
.tv-layout-split .tv-stage {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top" "qr text" "footer footer";
  column-gap: 8vh;
  align-items: center;
}
.tv-layout-split .tv-top { grid-area: top; }
.tv-layout-split .tv-qr { grid-area: qr; }
.tv-layout-split .tv-text { grid-area: text; max-width: 95vh; }
.tv-layout-split .tv-footer { grid-area: footer; text-align: center; }

/* Centré : titre, QR, message les uns sous les autres. */
.tv-layout-centered .tv-stage {
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  text-align: center;
}
.tv-layout-centered .tv-top { width: 100%; justify-content: center; position: relative; }
.tv-layout-centered .tv-clock { position: absolute; right: 0; }
.tv-layout-centered .tv-stage > .tv-qr { display: none; }
.tv-layout-centered .tv-text { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tv-layout-centered .tv-title { order: 0; margin-bottom: 3vh; font-size: 6.4vh; }
.tv-layout-centered .tv-text .tv-qr { order: 1; margin-bottom: 3.5vh; }
.tv-layout-centered .tv-message { order: 2; max-width: 120vh; font-size: 3vh; }
.tv-layout-centered .tv-message::before { display: none; }
.tv-layout-centered .tv-qr { width: 34vh; height: 34vh; }
.tv-layout-centered.tv-qr-small .tv-qr { width: 26vh; height: 26vh; }
.tv-layout-centered.tv-qr-large .tv-qr { width: 44vh; height: 44vh; }

/* Photo : textes en bas à gauche, QR en encart en bas à droite. */
.tv-layout-photo .tv-stage {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top" ". ." "text qr";
  column-gap: 6vh;
  align-items: end;
}
.tv-layout-photo .tv-top { grid-area: top; }
.tv-layout-photo .tv-text { grid-area: text; max-width: 110vh; text-shadow: 0 0.3vh 2vh rgba(0, 0, 0, 0.45); }
.tv-layout-photo .tv-qr { grid-area: qr; width: 30vh; height: 30vh; }
.tv-layout-photo.tv-qr-small .tv-qr { width: 24vh; height: 24vh; }
.tv-layout-photo.tv-qr-large .tv-qr { width: 38vh; height: 38vh; }
.tv-layout-photo .tv-footer { position: absolute; left: 8vh; bottom: 3vh; font-size: 2.4vh; }

/* Minimal : grand QR et titre, sans message ni logo. */
.tv-layout-minimal .tv-stage {
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  text-align: center;
}
.tv-layout-minimal .tv-logo,
.tv-layout-minimal .tv-message { display: none; }
.tv-layout-minimal .tv-top { width: 100%; justify-content: flex-end; }
.tv-layout-minimal .tv-text { display: flex; flex-direction: column; align-items: center; }
.tv-layout-minimal .tv-title { order: 1; margin: 4vh 0 0; font-size: 5.6vh; }
.tv-layout-minimal .tv-text .tv-qr { order: 0; }
.tv-layout-minimal .tv-stage > .tv-qr { display: none; }
.tv-layout-minimal .tv-qr { box-shadow: none; }

/* 3 étapes : trois cartes numérotées en gros caractères, lisibles par tous, sur fond uni ou photo. */
.tv-layout-steps .tv-stage {
  grid-template-rows: auto 1fr auto;
  text-align: center;
}
.tv-steps-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8vh;
  min-height: 0;
}
.tv-layout-steps .tv-top { justify-content: center; position: relative; }
.tv-layout-steps .tv-clock { position: absolute; right: 0; }
.tv-layout-steps .tv-title { margin: 0; font-size: 6.2vh; }
/* Sur une photo, titre en blanc ombré : la couleur « Titre » est pensée pour le fond uni. */
.tv-layout-steps.tv-has-photo .tv-text { color: #ffffff; text-shadow: 0 0.3vh 2vh rgba(0, 0, 0, 0.55); }
.tv-layout-steps.tv-has-photo .tv-message,
.tv-layout-steps.tv-has-photo .tv-clock,
.tv-layout-steps.tv-has-photo .tv-footer { color: #ffffff; }
.tv-layout-steps .tv-message { margin-top: 1.5vh; font-size: 3vh; }
.tv-layout-steps .tv-message::before { display: none; }
.tv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4vh;
  align-items: stretch;
}
.tv-step {
  position: relative;
  background: var(--tv-card);
  color: #1d2730;
  border-radius: 3vh;
  padding: 6vh 3.5vh 4vh;
  box-shadow: 0 1.5vh 5vh rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
}
.tv-step-num {
  position: absolute;
  top: -4vh;
  left: 50%;
  transform: translateX(-50%);
  width: 8vh;
  height: 8vh;
  line-height: 8vh;
  border-radius: 50%;
  background: var(--tv-accent);
  color: #ffffff;
  font-size: 4.6vh;
  font-weight: 700;
  box-shadow: 0 0.8vh 2vh rgba(0, 0, 0, 0.25);
}
.tv-step-art,
.tv-step-qr {
  flex: 0 0 auto;
  height: 26vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5vh;
}
.tv-step-icon { width: 20vh; height: 20vh; color: var(--tv-accent); }
.tv-step-qr svg { width: 26vh; height: 26vh; display: block; }
.tv-qr-small .tv-step-qr svg { width: 22vh; height: 22vh; }
.tv-step-head {
  margin: 0 0 1.2vh;
  font-size: 4.4vh;
  line-height: 1.2;
  font-weight: 700;
}
.tv-step-key {
  margin: 0.5vh 0 0;
  padding: 1vh 2.4vh;
  border-radius: 1.6vh;
  background: rgba(0, 0, 0, 0.06);
  font-size: 4.2vh;
  font-weight: 700;
  color: var(--tv-accent);
  overflow-wrap: anywhere;
}
.tv-step-detail {
  margin: 0;
  font-size: 3.2vh;
  line-height: 1.35;
  color: #4a5560;
}
.tv-cast-inline {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin: 0 0.15em;
  color: var(--tv-accent);
}
.tv-layout-steps .tv-footer { font-size: 2.6vh; }