/* La barre de sondage, partagée par l'overlay OBS et l'aperçu de la page de
   contrôle : un seul fichier, l'aperçu ne peut donc pas diverger de ce que
   voient les viewers.

   Toutes les dimensions sont des multiples de --u, posé par la page hôte.
   DA HyperX : rouge chauffé à blanc, noir carbone, chevrons, typo lourde
   oblique. */

/* font-display: block — un fallback qui clignote 200ms en direct est pire
   qu'une barre qui arrive 200ms plus tard. */
@font-face {
  font-family: 'Articulat CF';
  src: url('fonts/ArticulatCF.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Articulat CF';
  src: url('fonts/ArticulatCF-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-display: block;
}

.sondage {
  --u: 10px;
  --red: #ec1c24;
  --red-hot: #ff4d4d;
  --red-deep: #7e0a10;
  --carbon: #120406;
  --skew: -9deg;

  width: calc(120 * var(--u));
  font-family: 'Articulat CF', system-ui, sans-serif;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Rien à afficher : on quitte le stream complètement. */
.sondage[data-status='idle'] {
  opacity: 0;
  transform: translateY(calc(1.5 * var(--u)));
}

/* ---- Pastille de question ------------------------------------------------ */

.sondage__title {
  width: max-content;
  max-width: 100%;
  margin: 0 auto calc(2.2 * var(--u));
  padding: calc(0.9 * var(--u)) calc(4.5 * var(--u));
  transform: skewX(var(--skew));
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 calc(0.2 * var(--u)),
      transparent calc(0.2 * var(--u)) calc(1.1 * var(--u))),
    linear-gradient(100deg, #2a0609 0%, #6d0b12 48%, var(--red) 100%);
  border: calc(0.18 * var(--u)) solid rgba(255, 255, 255, 0.28);
  border-radius: calc(0.9 * var(--u));
  box-shadow:
    0 0 calc(3 * var(--u)) rgba(236, 28, 36, 0.55),
    inset 0 calc(0.2 * var(--u)) 0 rgba(255, 255, 255, 0.35);
}

.sondage__title span {
  display: block;
  transform: skewX(calc(-1 * var(--skew)));
  font-weight: 900;
  font-style: oblique 8deg;
  font-size: calc(3.4 * var(--u));
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 calc(0.2 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, 0.6);
}

/* ---- La barre ------------------------------------------------------------ */

.sondage__bar {
  display: flex;
  height: calc(11 * var(--u));
  transform: skewX(var(--skew));
  border: calc(0.25 * var(--u)) solid rgba(255, 255, 255, 0.22);
  border-radius: calc(1.1 * var(--u));
  overflow: hidden;
  box-shadow:
    0 calc(0.8 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.55),
    0 0 calc(4 * var(--u)) rgba(236, 28, 36, 0.3);
}

.sondage__side {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: calc(2 * var(--u));
  min-width: max-content;
  padding: 0 calc(3.4 * var(--u));
  position: relative;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
}

/* Les chevrons de la DA, en texture de fond des deux côtés. */
.sondage__side::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.09) 0 calc(0.25 * var(--u)),
    transparent calc(0.25 * var(--u)) calc(1.6 * var(--u))
  );
  pointer-events: none;
}

.sondage__side--a {
  justify-content: flex-start;
  background: linear-gradient(95deg, var(--red-hot) 0%, var(--red) 45%, var(--red-deep) 100%);
  box-shadow: inset 0 calc(0.25 * var(--u)) 0 rgba(255, 255, 255, 0.4);
}

.sondage__side--b {
  flex: 1;
  justify-content: flex-end;
  background: linear-gradient(95deg, #2b0a0d 0%, var(--carbon) 60%, #05070a 100%);
  box-shadow:
    inset calc(0.5 * var(--u)) 0 calc(2 * var(--u)) rgba(0, 0, 0, 0.6),
    inset 0 calc(0.25 * var(--u)) 0 rgba(255, 255, 255, 0.14);
}

/* La diagonale lumineuse entre les deux camps. */
.sondage__side--a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-0.3 * var(--u));
  width: calc(0.6 * var(--u));
  background: #fff;
  box-shadow: 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.8);
}

.sondage__label,
.sondage__pct {
  transform: skewX(calc(-1 * var(--skew)));
  font-weight: 900;
  font-style: oblique 8deg;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 calc(0.15 * var(--u)) calc(0.9 * var(--u)) rgba(0, 0, 0, 0.55);
}

.sondage__label {
  font-size: calc(2.9 * var(--u));
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sondage__pct {
  font-size: calc(5.4 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- Vote clos : le perdant s'efface, le gagnant reste plein ------------- */

.sondage[data-status='closed'] .sondage__side[data-loser] {
  filter: saturate(0.35) brightness(0.55);
}

/* ---- Pied : le compteur et le rappel de la consigne ---------------------- */

.sondage__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.2 * var(--u));
  margin: calc(1.8 * var(--u)) 0 0;
  font-size: calc(1.9 * var(--u));
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 calc(0.15 * var(--u)) calc(0.8 * var(--u)) rgba(0, 0, 0, 0.7);
}

.sondage__foot b {
  font-weight: 900;
  color: #fff;
}

.sondage__foot em {
  font-style: normal;
  padding: calc(0.15 * var(--u)) calc(0.9 * var(--u));
  border-radius: calc(0.4 * var(--u));
  background: var(--red);
  color: #fff;
  font-weight: 900;
}

.sondage__foot span[data-sep] {
  color: rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .sondage,
  .sondage__side {
    transition: none;
  }
}