/*!
 * TimeStage, chronometre de scene
 * © 2026 Arnisound Tools (Theo Arnissolle). Tous droits reserves.
 * Logiciel proprietaire : toute reproduction, modification, distribution ou
 * exploitation sans autorisation ecrite prealable est interdite. Voir LICENSE.
 */
/* Rendu de la scene : plein ecran, lisible de loin. */

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: clamp(.6rem, 2vmin, 2rem);
  gap: .4rem;
  background: var(--stage-bg, #08080b);
  color: var(--stage-fg, #f4f1ea);
  overflow: hidden;
  /* Reglages pilotes depuis la regie. */
  --timer-scale: 1;
  --text-scale: 1;
  transition: background-color .3s ease, color .3s ease;
}

.stage[data-phase="wrapup"] { --stage-accent: #facc15; }
.stage[data-phase="final"] { --stage-accent: #ef4444; }
.stage[data-phase="overrun"] { --stage-accent: #ef4444; --stage-bg: #190404; }
.stage[data-phase="running"], .stage[data-phase="idle"], .stage[data-phase="paused"] { --stage-accent: #22c55e; }
.stage[data-phase="clock"] { --stage-accent: #e2ab52; }
.stage[data-running="false"] .stage-time { opacity: .72; }

.stage-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  font-size: calc(clamp(.9rem, 2.6vmin, 2.2rem) * var(--text-scale));
  min-height: 1.2em;
}
.stage-ident { min-width: 0; display: flex; flex-direction: column; gap: .1em; }
.stage-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-speaker { color: #9b958a; font-size: .8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-clock { color: #9b958a; font-variant-numeric: tabular-nums; flex: none; }

.stage-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Plancher : meme couvert de bandeaux, le chrono garde de quoi s'afficher.
     C'est la raison d'etre de cette fenetre. */
  min-height: 18%;
  gap: .2em;
}
.stage[data-align="top"] .stage-main { justify-content: flex-start; }
.stage[data-align="bottom"] .stage-main { justify-content: flex-end; }
.stage-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--stage-accent, #f4f7fb);
  transition: color .25s ease;
  text-align: center;
  white-space: nowrap;
}
.stage-sub {
  font-size: calc(clamp(.8rem, 2.4vmin, 2rem) * var(--text-scale));
  color: #9b958a;
  letter-spacing: .04em;
}

.stage-progress {
  height: clamp(6px, 1.2vmin, 16px);
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.stage-progress .bar {
  height: 100%;
  width: 0%;
  background: var(--stage-accent, #22c55e);
  transition: width .2s linear, background-color .25s ease;
}

.stage-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  font-size: calc(clamp(.8rem, 2.2vmin, 1.8rem) * var(--text-scale));
  color: #9b958a;
  min-height: 1.2em;
}
.stage-next { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-state { flex: none; text-transform: uppercase; letter-spacing: .12em; font-size: .8em; }

/* Bandeaux bas : ils sont dans le flux, donc le chrono se reduit tout seul
   pour leur laisser la place au lieu d'etre recouvert. */
.stage-overlay {
  /* Les bandeaux cedent la place avant le chrono quand l'ecran est etroit. */
  flex: 0 1 auto;
  max-height: 60%;
  overflow: hidden;
  padding: clamp(.6rem, 2.4vmin, 2rem) clamp(.8rem, 3vmin, 2.5rem);
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
}
.stage-message {
  font-size: clamp(1.1rem, 5vmin, 4.5rem);
  background: rgba(15, 23, 42, .92);
  border-top: .35vmin solid #cb8a27;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
}
.stage-message[data-style="warn"] { border-color: #f59e0b; color: #fde68a; background: rgba(60, 40, 6, .94); }
.stage-message[data-style="alert"] { border-color: #ef4444; color: #fecaca; background: rgba(69, 10, 10, .94); }
.stage-message[data-style="success"] { border-color: #22c55e; color: #bbf7d0; background: rgba(5, 46, 22, .94); }
.stage-message.flash { animation: msg-flash 1s steps(1, end) infinite; }
@keyframes msg-flash { 50% { opacity: .25; } }

.stage-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  background: transparent;
  border-top: .35vmin solid #cb8a27;
}
.stage-question .q-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4em;
  width: 100%;
}
.stage-question .q-label {
  font-size: clamp(.8rem, 2.2vmin, 1.6rem);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #e2ab52;
  font-weight: 700;
}
.stage-question .q-text {
  font-size: clamp(1.1rem, 4.4vmin, 4rem);
  max-width: 92%;
  white-space: pre-wrap;
  word-break: break-word;
}
.stage-question .q-author { font-size: clamp(.9rem, 2.6vmin, 2rem); color: #9b958a; font-weight: 500; }

/* Sondage du public : le bandeau vit dans le flux comme les autres, donc le
   chrono se reduit a son arrivee au lieu d'etre recouvert. */
.stage-poll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35em;
  background: rgba(10, 10, 13, .82);
  border-top: .35vmin solid #cb8a27;
}
.stage-poll .p-label {
  font-size: clamp(.7rem, 1.8vmin, 1.3rem);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #e2ab52;
}
.stage-poll .p-question {
  font-size: clamp(1rem, 3.4vmin, 2.8rem);
  max-width: 94%;
  text-align: center;
  word-break: break-word;
}
.stage-poll .p-options {
  list-style: none;
  margin: .2em 0 0;
  padding: 0;
  width: 94%;
  display: grid;
  gap: .3em;
}
.stage-poll .p-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5em;
  overflow: hidden;
  padding: .3em .6em;
  border: 1px solid rgba(203, 138, 39, .35);
  border-radius: .4em;
  font-size: clamp(.85rem, 2.6vmin, 2.1rem);
  line-height: 1.2;
}
.stage-poll[data-size="sm"] .p-option { font-size: clamp(.75rem, 2vmin, 1.6rem); }
.stage-poll .p-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(203, 138, 39, .3);
  transition: width .5s ease;
}
.stage-poll .p-option.leading .p-bar { background: rgba(203, 138, 39, .55); }
.stage-poll .p-key,
.stage-poll .p-text,
.stage-poll .p-share { position: relative; }
.stage-poll .p-key {
  flex: none;
  width: 1.6em;
  text-align: center;
  color: #e2ab52;
  font-family: var(--mono, monospace);
}
.stage-poll .p-text { flex: 1 1 auto; text-align: left; word-break: break-word; }
.stage-poll .p-share { flex: none; font-variant-numeric: tabular-nums; }
.stage-poll .p-foot { font-size: clamp(.7rem, 1.8vmin, 1.2rem); color: #9b958a; font-weight: 500; }
.preview .stage-poll .p-question { font-size: clamp(.7rem, 2vmin, 1.1rem); }
.preview .stage-poll .p-option { font-size: clamp(.55rem, 1.5vmin, .85rem); padding: .2em .4em; }
.preview .stage-poll .p-label,
.preview .stage-poll .p-foot { font-size: clamp(.45rem, 1.1vmin, .65rem); }

.stage-flash {
  position: absolute;
  inset: 0;
  background: #ef4444;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.stage-flash.on { animation: stage-flash 1s steps(1, end) infinite; }
@keyframes stage-flash { 0%, 49% { opacity: 0; } 50%, 100% { opacity: .28; } }

.stage.blackout > *:not(.stage-blackout) { visibility: hidden; }
.stage.blackout { background: #000; }

/* Themes ------------------------------------------------------------------ */
.stage[data-theme="light"] { --stage-bg: #f8fafc; --stage-fg: #0f172a; }
.stage[data-theme="light"] .stage-speaker,
.stage[data-theme="light"] .stage-clock,
.stage[data-theme="light"] .stage-sub,
.stage[data-theme="light"] .stage-bottom { color: #475569; }
.stage[data-theme="light"] .stage-progress { background: rgba(15, 23, 42, .12); }
.stage[data-theme="brand"] { --stage-bg: #08080b; --stage-fg: #f4f1ea; }
.stage[data-theme="brand"][data-phase="running"],
.stage[data-theme="brand"][data-phase="idle"],
.stage[data-theme="brand"][data-phase="paused"] { --stage-accent: #e2ab52; }
.stage[data-theme="contrast"] { --stage-bg: #000; --stage-fg: #fff; }
.stage[data-theme="contrast"][data-phase="running"],
.stage[data-theme="contrast"][data-phase="idle"],
.stage[data-theme="contrast"][data-phase="paused"] { --stage-accent: #ffffff; }

/* Apercu reduit (regie) : on garde les proportions lisibles. */
.preview .stage-message { font-size: clamp(.7rem, 2.2vmin, 1.4rem); border-top-width: 2px; }
.preview .stage-question { border-top-width: 2px; }
.preview .stage-question .q-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4em;
  width: 100%;
}
.stage-question .q-label { font-size: clamp(.5rem, 1.1vmin, .7rem); letter-spacing: .12em; }
.preview .stage-question .q-text { font-size: clamp(.7rem, 2.2vmin, 1.4rem); }
.preview .stage-question .q-author { font-size: clamp(.55rem, 1.3vmin, .8rem); }
.stage-question[data-size="md"] .q-text { font-size: clamp(1rem, 3.4vmin, 3rem); }
.stage-question[data-size="sm"] .q-text { font-size: clamp(.9rem, 2.6vmin, 2.2rem); }

/* Animations --------------------------------------------------------------- */
.stage-effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* derriere le chrono par defaut : les chiffres restent lisibles */
}
.stage-effects[data-layer="front"] { z-index: 5; }
.stage.blackout .stage-effects { visibility: hidden; }
/* Le chrono, ses textes et les bandeaux passent devant la couche de fond :
   sans cela, un canvas positionne (meme en z-index 0) recouvrirait le contenu
   non positionne du flux. */
.stage-main, .stage-top, .stage-bottom, .stage-progress { position: relative; z-index: 1; }
.stage-message, .stage-question, .stage-poll { position: relative; z-index: 2; }

/* Logo de l'evenement ----------------------------------------------------- */
.stage-logo {
  position: absolute;
  height: var(--logo-size, 12%);
  width: auto;
  max-width: 42%;
  object-fit: contain;
  opacity: var(--logo-opacity, 1);
  pointer-events: none;
  z-index: 1;
}
.stage-logo[hidden] { display: none; }
.stage-logo[data-pos="top-left"] { top: clamp(.6rem, 2vmin, 2rem); left: clamp(.6rem, 2vmin, 2rem); }
.stage-logo[data-pos="top-right"] { top: clamp(.6rem, 2vmin, 2rem); right: clamp(.6rem, 2vmin, 2rem); }
.stage-logo[data-pos="bottom-left"] { bottom: clamp(.6rem, 2vmin, 2rem); left: clamp(.6rem, 2vmin, 2rem); }
.stage-logo[data-pos="bottom-right"] { bottom: clamp(.6rem, 2vmin, 2rem); right: clamp(.6rem, 2vmin, 2rem); }
/* Dans le flux, au-dessus ou en dessous du chrono : aucun recouvrement. */
.stage-logo[data-pos="above"],
.stage-logo[data-pos="below"] {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  max-width: 70%;
  margin: .15em 0;
}
/* Filigrane : derriere le chrono, centre. */
.stage-logo[data-pos="center"] {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: var(--logo-size, 60%);
  max-width: 80%;
  z-index: 0;
}
.stage.blackout .stage-logo { visibility: hidden; }

/* Fenetre video (incrustation) --------------------------------------------
   Le chrono seul, sur fond transparent ou sur une couleur d'incrustation :
   destine a une source navigateur dans un melangeur video (OBS, vMix…). */
.stage.key-mode {
  background: var(--key-bg, transparent);
  padding: clamp(.3rem, 1vmin, 1rem);
}
.stage.key-mode .stage-top,
.stage.key-mode .stage-bottom,
.stage.key-mode .stage-progress,
.stage.key-mode .stage-sub,
.stage.key-mode .stage-overlay,
.stage.key-mode .stage-flash { display: none; }
.stage.key-mode[data-show~="title"] .stage-top { display: flex; }
.stage.key-mode[data-show~="title"] .stage-clock { display: none; }
.stage.key-mode[data-show~="sub"] .stage-sub { display: block; }
.stage.key-mode[data-show~="progress"] .stage-progress { display: block; }
.stage.key-mode[data-show~="message"] .stage-message { display: block; }
.stage.key-mode[data-show~="poll"] .stage-poll { display: flex; }
/* Le texte porte souvent une ombre pour rester lisible sur l'image video. */
.stage.key-mode[data-shadow="true"] .stage-time { text-shadow: 0 .04em .06em rgba(0, 0, 0, .65); }