/* =====================================================================
   LA SOIRÉE DES TROPHÉES 2026 · Crédit Agricole Loire Haute-Loire
   Écran latéral vertical (4 m × 7 m) — noir & or
   ----------------------------------------------------------------------
   - Charte officielle (assets/ID VISUEL) : polices berlinsans / Batavia
     Retro / TT Norms Pro, dégradé champagne → bronze du logo
   - La scène est verrouillée au ratio 4:7 et centrée dans la fenêtre
   - Toutes les tailles sont en cqw (1cqw = 1 % de la largeur de scène)
     → rendu identique quelle que soit la résolution du mur LED
   - Polices embarquées (public/fonts) : fonctionne hors-ligne
   ===================================================================== */

@font-face { font-family: 'Berlin Sans';   font-display: block; src: url('/fonts/berlinsans.ttf') format('truetype'); }
@font-face { font-family: 'Batavia Retro'; font-display: block; src: url('/fonts/batavia-retro.otf') format('opentype'); }
@font-face { font-family: 'TT Norms Pro';  font-display: block; font-weight: 300; src: url('/fonts/ttnormspro-light.otf') format('opentype'); }

:root {
  --black:  #050403;
  --night:  #0d0905;
  /* Teintes relevées sur le logo officiel (champagne → bronze) */
  --gold-1: #f6eedd;
  --gold-2: #e1cfb0;
  --gold-3: #bea482;
  --gold-4: #92633d;
  --gold-5: #4a2f17;
  --ivory:  #f7f1e6;

  /* Dégradé horizontal du « SOIRÉE » du logo */
  --metal: linear-gradient(90deg, #a2834a 0%, #c1a874 12%, #e1cfb0 26%, #d5c1a1 38%, #bea482 52%, #a68762 68%, #986f49 84%, #92633d 100%);

  --display: 'Berlin Sans', 'Segoe UI', sans-serif;
  --sans:    'TT Norms Pro', 'Segoe UI', sans-serif;
  --script:  'Batavia Retro', cursive;
  --ease:    cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body.ecran {
  background: #000;
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: none;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Scène 4:7 ─────────────────────────────────────────────────────── */
.stage {
  position: relative;
  width:  min(100vw, calc(100vh * 4 / 7));
  height: min(100vh, calc(100vw * 7 / 4));
  container-type: size;
  overflow: hidden;
  isolation: isolate;
  /* Décor officiel (calques Fond, Spots, Etoiles, Eclairage Sol du PDF client, sans logo) */
  background: #050403 url('/assets/decor.jpg') center / cover no-repeat;
}

/* Visuel officiel complet (logo compris) : écran d'attente */
.official-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.stage[data-state="waiting"] .official-bg { opacity: 1; }

/* Intro : le visuel se construit couche par couche, puis laisse place à l'image fixe */
.official-intro {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease);
  pointer-events: none;
}
.stage.intro-playing .official-intro { opacity: 1; transition: none; }
.stage.intro-playing .sparkles { opacity: 0; }

/* Étincelles animées par-dessus le décor (le décor contient déjà les rideaux fixes) */
.sparkles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .5; }

/* Logo de la soirée en tête, logo partenaire en pied (comme sur la charte) */
.top-logo {
  position: absolute; top: 5cqw; left: 50%; z-index: 5;
  width: 36cqw; transform: translateX(-50%);
  filter: drop-shadow(0 0 2cqw rgba(0, 0, 0, .7));
  transition: opacity .9s var(--ease);
}
.brand-logo {
  position: absolute; bottom: 5cqw; left: 50%; z-index: 5;
  width: 21cqw; transform: translateX(-50%);
  transition: opacity .9s var(--ease);
}
.stage[data-state="waiting"] .top-logo,
.stage[data-state="waiting"] .brand-logo { opacity: 0; }

/* Éléments communs */
.kicker {
  font-family: var(--sans); font-weight: 300;
  font-size: 4.4cqw; letter-spacing: 1.2cqw; text-transform: uppercase;
  color: var(--gold-2);
}
.rule {
  display: block; width: 26cqw; height: .35cqw; margin: 4cqw auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

/* ── Écrans (un seul visible à la fois) ─────────────────────────────── */
.screen {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 8cqw;
  opacity: 0; visibility: hidden;
  transform: translateY(2cqw);
  transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s .9s;
}
.screen.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s;
}

/* ── VOTE : en-tête projet ───────────────────────────────────────────── */
.screen-vote { padding-top: 36cqw; }
.vote-head { min-height: 26cqw; display: flex; flex-direction: column; align-items: center; }
.project-name {
  margin-top: 2.4cqw;
  font-family: var(--display); font-weight: 400;
  font-size: 9cqw; line-height: 1.05; text-transform: uppercase; letter-spacing: .2cqw;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .5cqw 1.5cqw rgba(0, 0, 0, .7));
}
.screen-vote .rule { margin-top: 3cqw; }

/* ── VOTE : jauge verticale ──────────────────────────────────────────── */
.gauge-zone {
  position: relative; flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  margin: 2cqw 0 3cqw;
}
.gauge {
  position: relative; height: min(100%, 66cqw); width: 21cqw;
  transition: transform 1s var(--ease), opacity .8s var(--ease), filter 1s var(--ease);
}
.gauge-track {
  position: absolute; inset: 0;
  border-radius: 12cqw;
  border: .45cqw solid rgba(225, 207, 176, .55);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .04)),
    rgba(10, 7, 3, .75);
  box-shadow: inset 0 0 3cqw rgba(0, 0, 0, .9), 0 0 5cqw rgba(200, 160, 100, .18);
  overflow: hidden;
}
.gauge-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(0deg, var(--gold-5) 0%, var(--gold-4) 22%, var(--gold-3) 55%, var(--gold-2) 85%, var(--gold-1) 100%);
  box-shadow: 0 0 6cqw rgba(225, 190, 130, .5);
  transition: height .12s linear;
}
/* Hachures obliques animées, reprise de l'emblème « Territoire » */
.gauge-fill::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-32deg, rgba(255, 255, 255, .22) 0 .35cqw, transparent .35cqw 2cqw);
  mix-blend-mode: overlay;
  animation: hatch 2.4s linear infinite;
}
@keyframes hatch { to { background-position: 0 -11.9cqw; } }
.gauge-cap {
  position: absolute; left: 6%; right: 6%; top: -.3cqw; height: .8cqw; border-radius: 1cqw;
  background: #fffbef;
  box-shadow: 0 0 2cqw 1cqw rgba(255, 240, 205, .85), 0 0 8cqw 2cqw rgba(225, 190, 130, .5);
}
.gauge-peak {
  position: absolute; left: 10%; right: 10%; height: .5cqw; bottom: 0;
  background: var(--gold-1); border-radius: 1cqw;
  box-shadow: 0 0 1.5cqw rgba(255, 245, 225, .9);
  transform: translateY(50%);
}
/* Graduations de part et d'autre de la jauge */
.gauge-ticks { position: absolute; top: 6cqw; bottom: 6cqw; left: -8cqw; right: -8cqw; pointer-events: none; }
.gauge-ticks::before, .gauge-ticks::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 5cqw;
  background:
    repeating-linear-gradient(0deg, rgba(225, 207, 176, .75) 0 .3cqw, transparent .3cqw calc(10% - .03cqw)),
    repeating-linear-gradient(0deg, rgba(225, 207, 176, .3) 0 .2cqw, transparent .2cqw calc(5% - .02cqw));
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent);
          mask: linear-gradient(90deg, #000 40%, transparent);
}
.gauge-ticks::before { left: 0; transform: scaleX(-1); }
.gauge-ticks::after  { right: 0; }

.vote-cta {
  margin-bottom: 17cqw;
  font-family: var(--script); font-size: 22cqw; line-height: 1.1; color: var(--ivory);
  -webkit-text-stroke: .18cqw var(--ivory);
  text-shadow: 0 0 3cqw rgba(255, 225, 170, .45);
  animation: cta 1.1s ease-in-out infinite;
  transition: opacity .6s var(--ease);
}
@keyframes cta { 50% { transform: scale(1.06); } }

/* ── SCORE : la jauge se transforme en score ─────────────────────────── */
.score-reveal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.55);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
  pointer-events: none;
}
.score-num {
  font-family: var(--display); font-weight: 400;
  font-size: 32cqw; line-height: .95; letter-spacing: -.4cqw;
  font-variant-numeric: tabular-nums;
  /* marge basse : la queue de la virgule sort de la boîte et serait rognée par background-clip */
  padding: 0 1cqw 6cqw; margin-bottom: -6cqw;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4cqw rgba(225, 190, 130, .45)) drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .7));
}
.score-unit { font-family: var(--script); font-size: 20cqw; line-height: 1.1; color: var(--ivory); margin-top: 1cqw; -webkit-text-stroke: .15cqw var(--ivory); }

.screen-vote.is-result .gauge-fill { transition: height 1.1s var(--ease); }
.screen-vote.is-result .gauge-fill::before { animation-duration: .8s; }
.screen-vote.is-result .gauge-peak { display: none !important; }
.screen-vote.is-result .vote-cta { opacity: 0; animation: none; }
.screen-vote.is-revealed .gauge { transform: scale(.4, .25); opacity: 0; filter: blur(2cqw) brightness(2); }
.screen-vote.is-revealed .score-reveal { opacity: 1; transform: none; }

/* Éclat lumineux au moment de la transformation */
.screen-vote.is-revealed .gauge-zone::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 120cqw; height: 120cqw; margin: -60cqw 0 0 -60cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 210, .55), rgba(215, 180, 120, .15) 35%, transparent 65%);
  animation: burst 1.6s var(--ease) forwards;
  pointer-events: none; z-index: -1;
}
@keyframes burst { from { transform: scale(.1); opacity: 1; } to { transform: scale(1); opacity: 0; } }

/* ── CLASSEMENT ─────────────────────────────────────────────────────── */
.screen-ranking { padding: 37cqw 6cqw 0; }
.rank-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 6cqw; }
.rank-title {
  margin-top: 2cqw;
  font-family: var(--display); font-weight: 400; font-size: 8cqw; line-height: 1.05; text-transform: uppercase;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rank-head .rule { margin-top: 2.4cqw; }

.rank-list { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 2.2cqw; }
.rank-list li {
  display: grid; grid-template-columns: 10cqw 1fr auto; align-items: center; gap: 2.8cqw;
  padding: 2.4cqw 3cqw 2.4cqw 2.4cqw;
  border-radius: 2cqw;
  background: linear-gradient(90deg, rgba(225, 207, 176, .1), rgba(225, 207, 176, .03)), rgba(8, 5, 2, .55);
  border: .25cqw solid rgba(225, 207, 176, .22);
  text-align: left;
  opacity: 0; transform: translateX(-6cqw);
  animation: row-in .9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes row-in { to { opacity: 1; transform: none; } }
.rank-list .r-pos {
  width: 10cqw; height: 10cqw; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 4.8cqw; color: var(--gold-2);
  border: .3cqw solid rgba(225, 207, 176, .55);
}
.rank-list .r-name {
  font-family: var(--display); font-size: 4.6cqw; line-height: 1.1; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rank-list .r-score { font-family: var(--display); font-size: 5.2cqw; color: var(--gold-2); font-variant-numeric: tabular-nums; }

.rank-list li.is-first {
  padding-top: 3.4cqw; padding-bottom: 3.4cqw;
  background: linear-gradient(90deg, rgba(215, 180, 120, .32), rgba(215, 180, 120, .08)), rgba(8, 5, 2, .55);
  border-color: var(--gold-2);
  box-shadow: 0 0 6cqw rgba(215, 180, 120, .25);
}
.rank-list li.is-first .r-pos { background: var(--metal); color: var(--black); border: 0; }
.rank-list li.is-first .r-name { font-size: 5.2cqw; color: var(--gold-1); }
.rank-list li.is-long .r-name { font-size: 4cqw; }
.rank-list li.is-first.is-long .r-name { font-size: 4.6cqw; }
.rank-list li.is-first .r-score { font-size: 6.6cqw; color: var(--gold-1); }

/* ── LAURÉAT ─────────────────────────────────────────────────────────── */
.screen-winner { padding: 40cqw 6cqw 0; }
.emblem-backdrop {
  position: absolute; top: 30cqw; left: 50%; z-index: -1;
  width: 78cqw; transform: translateX(-50%);
  opacity: .32;
  filter: drop-shadow(0 0 4cqw rgba(215, 180, 120, .3));
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateX(-50%) translateY(-1.6cqw); } }
.winner-name {
  margin-top: 3cqw;
  font-family: var(--display); font-weight: 400; font-size: 12cqw; line-height: 1.05; text-transform: uppercase;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 4cqw rgba(215, 180, 120, .45));
}
.winner-score { margin-top: 2cqw; font-family: var(--display); font-size: 10cqw; color: var(--gold-1); font-variant-numeric: tabular-nums; }
.winner-score small { font-family: var(--script); font-size: 14cqw; color: var(--ivory); margin-left: 1cqw; -webkit-text-stroke: .12cqw var(--ivory); }
.screen-winner .rule { margin: 5cqw auto 5cqw; }
.rank-compact { gap: 1.6cqw; }
.rank-compact li { padding: 1.6cqw 3cqw 1.6cqw 1.8cqw; }
.rank-compact li.is-first { display: none; }
.rank-compact .r-pos { width: 8cqw; height: 8cqw; font-size: 4cqw; }
.rank-compact .r-name { font-size: 4.2cqw; }
.rank-compact .r-score { font-size: 4.4cqw; }

/* ── Décompte 3-2-1 ─────────────────────────────────────────────────── */
.countdown {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(20, 14, 6, .55), rgba(0, 0, 0, .88) 70%);
  font-family: var(--display); font-size: 70cqw; line-height: 1;
}
.countdown span {
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6cqw rgba(215, 180, 120, .5));
  animation: count-pop .8s var(--ease) both;
}
.countdown span.go { font-family: var(--script); font-size: 30cqw; color: var(--ivory); background: none; -webkit-text-stroke: .2cqw var(--ivory); }
@keyframes count-pop {
  0%   { transform: scale(1.8); opacity: 0; filter: blur(2cqw); }
  35%  { transform: scale(1);   opacity: 1; filter: blur(0) drop-shadow(0 0 6cqw rgba(215, 180, 120, .5)); }
  100% { transform: scale(.92); opacity: 1; }
}

/* ── Overlay média (plein écran, hors scène) ───────────────────────── */
.media-overlay {
  position: fixed; inset: 0; z-index: 950;
  display: none; align-items: center; justify-content: center;
  background: #000;
}
.media-overlay video, .media-overlay img { width: 100%; height: 100%; object-fit: contain; }

/* ── Outils techniques (visibles uniquement avec ?debug) ───────────── */
.signal-pill, .manual-slider { display: none; }
body.debug { cursor: auto; }
body.debug .signal-pill {
  display: block; position: fixed; top: 12px; right: 12px; z-index: 1000;
  padding: 6px 12px; border-radius: 999px; font: 600 12px/1 system-ui, sans-serif;
  background: rgba(0, 0, 0, .7); border: 1px solid #555; color: #aaa;
}
body.debug .signal-pill.signal-ok    { color: #4ade80; }
body.debug .signal-pill.signal-error { color: #f87171; }
body.debug.no-mic .manual-slider {
  display: flex; gap: 2cqw; align-items: center; position: absolute; bottom: 18cqw; left: 10cqw; right: 10cqw;
  color: var(--gold-2); font-size: 3cqw;
}
body.debug.no-mic .manual-slider input { flex: 1; accent-color: var(--gold-3); }

@media (prefers-reduced-motion: reduce) {
  .gauge-fill::before, .vote-cta, .emblem-backdrop { animation: none !important; }
}