/* ============================================================
   MATCH OR CLASH — live.css

   Complément à style.css. Aucune règle existante n'est modifiée :
   ce fichier n'ajoute que les composants alimentés par le serveur
   de jeu (classement, actualités, votes réels).

   Les variables reprennent la palette déjà en place dans le site.
   ============================================================ */

:root{
  --mc-pink:#ff147f;
  --mc-pink-soft:#ff4b94;
  --mc-orange:#ff5b19;
  --mc-gold:#ffd02c;
  --mc-ink:#0b090c;
  --mc-line:rgba(255,255,255,.1);
  --mc-muted:#8d8792;
}

/* --- état de connexion dans la barre du haut --- */
.season em{font-style:normal;transition:color .3s}
.season em.live{color:#ff3d87}
.season em.offline{color:#7a6f7e}

/* ============================================================
   SECTIONS LIVE
   ============================================================ */
.live-section{background:#0d0a11}
.live-section.alt{background:linear-gradient(180deg,#0d0a11,#100b0d)}

.live-title{
  font-family:Anton,sans-serif;
  font-size:clamp(48px,6vw,88px);
  line-height:.9;margin:0 0 45px;
}
.live-title span{color:var(--mc-pink-soft)}

.live-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;margin-bottom:45px;
}
.live-head .live-title{margin:0}

.live-tabs{display:flex;gap:6px;flex-wrap:wrap}
.lt{
  padding:12px 18px;border:1px solid rgba(255,255,255,.14);background:transparent;
  color:#aaa;font-family:Montserrat,sans-serif;font-size:9px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s;
}
.lt:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.lt.on{background:linear-gradient(110deg,var(--mc-pink),var(--mc-orange));border-color:transparent;color:#fff}

/* ============================================================
   PODIUM

   Les trois premiers sont traités comme des affiches de casting :
   c'est ce qui donne envie de vouloir y figurer.
   ============================================================ */
.podium{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px;
  align-items:end;
}
.pod{
  position:relative;padding:32px 24px 26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(11,9,12,.9));
}
.pod:before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(125deg,transparent 0 38px,rgba(255,255,255,.045) 39px 42px);
}
.pod.p1{
  padding-top:46px;
  background:linear-gradient(160deg,rgba(255,20,127,.28),rgba(255,91,25,.14) 55%,rgba(11,9,12,.92));
  border-color:rgba(255,208,44,.45);
  box-shadow:0 20px 60px rgba(255,37,108,.18);
}
.pod.p2{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(11,9,12,.92))}
.pod.p3{background:linear-gradient(160deg,rgba(255,91,25,.16),rgba(11,9,12,.92))}

.pod .pos{
  font-family:Anton,sans-serif;font-size:56px;line-height:.8;
  color:rgba(255,255,255,.16);position:relative;
}
.pod.p1 .pos{color:var(--mc-gold);text-shadow:0 0 30px rgba(255,208,44,.5)}
.pod.p2 .pos{color:rgba(255,255,255,.5)}
.pod.p3 .pos{color:var(--mc-orange)}

.pod .nm{
  display:block;font-family:Anton,sans-serif;font-size:clamp(22px,2.4vw,34px);
  line-height:1;margin:14px 0 6px;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pod .sc{
  display:block;font-size:clamp(20px,2.2vw,30px);font-weight:900;
  color:var(--mc-pink-soft);position:relative;
}
.pod .unit{display:block;font-size:8px;font-weight:900;letter-spacing:.16em;color:var(--mc-muted);margin-top:4px}
.pod .bz{
  position:absolute;top:16px;right:18px;font-size:10px;font-weight:900;
  letter-spacing:.08em;color:var(--mc-orange);
}
.pod .crown{position:absolute;top:14px;left:20px;font-size:18px}

/* --- reste du classement --- */
.rank-list{display:flex;flex-direction:column;gap:2px}
.rk{
  display:grid;grid-template-columns:44px 1fr auto auto;gap:16px;align-items:center;
  padding:16px 20px;background:rgba(255,255,255,.03);
  border-left:2px solid transparent;transition:.2s;
}
.rk:hover{background:rgba(255,255,255,.06);border-left-color:var(--mc-pink)}
.rk .p{font-family:Anton,sans-serif;font-size:16px;color:#5d5763}
.rk .n{font-size:13px;font-weight:800;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .b{font-size:10px;font-weight:900;color:var(--mc-orange);letter-spacing:.06em}
.rk .s{font-size:15px;font-weight:900;color:var(--mc-pink-soft);font-variant-numeric:tabular-nums}

/* ============================================================
   ACTUALITÉS
   ============================================================ */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.news{
  position:relative;padding:26px 24px;overflow:hidden;
  background:var(--mc-ink);border:1px solid var(--mc-line);
  border-top:3px solid var(--mc-pink);
  transition:transform .25s,box-shadow .25s;
}
.news:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.news.clash{border-top-color:#ff2b3d}
.news.scandale{border-top-color:var(--mc-orange)}
.news.coeur{border-top-color:var(--mc-pink)}
.news.rumeur{border-top-color:#a855f7}
.news.communaute{border-top-color:#14e8d6}
.news.vote{border-top-color:var(--mc-gold)}
.news.contrat{border-top-color:#6ee77f}

.news .kick{
  font-size:8px;font-weight:900;letter-spacing:.18em;color:var(--mc-muted);
  display:flex;justify-content:space-between;gap:10px;
}
.news h3{
  font-family:Anton,sans-serif;font-size:22px;line-height:1.05;
  margin:14px 0 10px;font-weight:400;
}
.news p{font-size:12.5px;line-height:1.65;color:#a29ca7;margin:0}
.news .gain{
  display:inline-block;margin-top:16px;font-size:11px;font-weight:900;
  color:#14e8d6;letter-spacing:.04em;
}
.news .gain.neg{color:#ff5670}

/* ============================================================
   VOTES RÉELS
   ============================================================ */
.vote-card.vote-empty{text-align:center;padding:50px 30px}
.vote-card.vote-empty p{font-size:12px;color:var(--mc-muted);margin:12px 0 0;line-height:1.7}

.vote-note{
  font-size:11px !important;line-height:1.7;color:#6f6874 !important;
  border-left:2px solid rgba(255,20,127,.4);padding-left:14px;margin-top:22px !important;
}

.vote-card .vq{
  font-size:11.5px;line-height:1.6;color:#a29ca7;
  margin:14px 0 6px;font-weight:500;letter-spacing:0;text-transform:none;
}

/* Une option devient cliquable tant que le visiteur n'a pas voté. */
.vopt{cursor:pointer;transition:opacity .2s}
.vopt:hover .bar i{filter:brightness(1.25)}
.vopt.voted{cursor:default}
.vopt.mine .candidate strong{color:var(--mc-gold)}
.vopt.mine .bar i{background:linear-gradient(90deg,var(--mc-gold),var(--mc-orange))}
.vopt.mine .candidate b:after{content:" ✓";color:var(--mc-gold)}

.vote-card .vmeta{
  display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;
  border-top:1px solid var(--mc-line);font-size:8px;font-weight:900;
  letter-spacing:.14em;color:var(--mc-muted);
}

.vote-card button:disabled{opacity:.4;cursor:not-allowed}

/* Plusieurs votes ouverts : on les empile. */
#voteZone > .vote-card + .vote-card{margin-top:18px}

/* ============================================================
   ÉTATS
   ============================================================ */
.live-empty{
  padding:50px 20px;text-align:center;font-size:12px;
  color:var(--mc-muted);line-height:1.8;
  border:1px dashed rgba(255,255,255,.12);
}
.live-loading{
  padding:40px 20px;text-align:center;font-size:10px;font-weight:900;
  letter-spacing:.2em;color:var(--mc-muted);
}

/* ============================================================
   NOTIFICATION
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);
  padding:15px 26px;z-index:60;pointer-events:none;
  background:linear-gradient(110deg,var(--mc-pink),var(--mc-orange));
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 40px rgba(255,37,108,.35);
  opacity:0;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:linear-gradient(110deg,#ff2b3d,#8b1030)}

@media(max-width:850px){
  .podium{grid-template-columns:1fr;gap:12px}
  .pod.p1{padding-top:32px}
  .live-head{flex-direction:column;align-items:flex-start;gap:24px}
  .rk{grid-template-columns:34px 1fr auto;gap:12px;padding:14px}
  .rk .b{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   PUBLICATIONS DES CANDIDATS

   Le public agit ici : les boutons doivent être francs, et le
   résultat de son clic immédiatement lisible.
   ============================================================ */

.feed-note{
  max-width:460px;font-size:12px;line-height:1.8;color:var(--mc-muted);margin:0;
  border-left:2px solid rgba(255,20,127,.4);padding-left:16px;
}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}

.post{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--mc-ink);border:1px solid var(--mc-line);
  transition:transform .25s,box-shadow .25s;
}
.post:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.post.clash{border-top:3px solid #ff2b3d}
.post.love{border-top:3px solid var(--mc-pink)}
.post.photo{border-top:3px solid #14e8d6}
.post.story{border-top:3px solid var(--mc-gold)}

.post .verdict{
  padding:7px 14px;font-size:8px;font-weight:900;letter-spacing:.2em;text-align:center;
}
.post .verdict.viral{background:linear-gradient(90deg,var(--mc-gold),var(--mc-orange));color:#2a0a00}
.post .verdict.flop{background:linear-gradient(90deg,#ff2b3d,#8b1030);color:#fff}

.post .ph{display:flex;align-items:center;gap:11px;padding:18px 18px 12px}
.post .av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-content:center;
  font-family:Anton,sans-serif;font-size:14px;
  background:linear-gradient(140deg,var(--mc-pink),#8b2bff);
}
.post.clash .av{background:linear-gradient(140deg,var(--mc-orange),#ff2b3d)}
.post .who{flex:1;min-width:0;line-height:1.3}
.post .nm{display:block;font-size:13px;font-weight:900;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post .mt{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--mc-muted)}
.post .gr{
  font-size:8px;font-weight:900;letter-spacing:.14em;padding:4px 7px;flex:none;
  background:rgba(255,255,255,.1);
}
.post .gr.VIRAL{background:linear-gradient(110deg,var(--mc-gold),var(--mc-orange));color:#2a0a00}
.post .gr.BAD{background:rgba(255,43,61,.7)}

.post .tx{padding:0 18px 12px;font-size:13.5px;line-height:1.6;word-break:break-word;flex:1}
.post .tg{color:var(--mc-orange);font-weight:900}
.post .im{width:100%;display:block;max-height:240px;object-fit:cover;background:#050308}
.post .tags{padding:0 18px 14px;display:flex;flex-wrap:wrap;gap:6px}
.post .tag{font-size:10px;font-weight:800;color:#14e8d6;opacity:.85}

/* --- boutons de réaction --- */
.react{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mc-line);
  margin-top:auto;border-top:1px solid var(--mc-line)}
.rb{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 10px;border:0;cursor:pointer;background:#0b090c;color:#fff;
  font-family:Montserrat,sans-serif;font-size:12px;font-weight:900;letter-spacing:.06em;
  transition:background .18s,color .18s;
}
.rb i{font-style:normal;font-size:15px}
.rb:hover{background:rgba(255,255,255,.06)}
.rb.up:hover{color:#3ddc84}
.rb.down:hover{color:#ff5670}
.rb.picked.up{background:rgba(61,220,132,.18);color:#3ddc84}
.rb.picked.down{background:rgba(255,86,112,.18);color:#ff5670}
.rb:disabled{cursor:default}
.rb.locked{opacity:.55}

/* Retour visuel immédiat au clic : le public doit voir son effet. */
.rb.pulse{animation:rbPulse .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes rbPulse{50%{transform:scale(1.08)}}

.post .impact{
  padding:10px 18px;font-size:9.5px;font-weight:900;letter-spacing:.1em;
  color:var(--mc-muted);display:flex;justify-content:space-between;gap:10px;
  border-top:1px solid var(--mc-line);
}
.post .impact b{color:var(--mc-pink-soft)}

@media(max-width:850px){
  .posts{grid-template-columns:1fr}
  .feed-note{max-width:none}
}