/* ZIC Pronos — face publique (profil landing).
   Look néon reproduit fidèlement depuis zic-profil-2.jsx (PronosFace).
   Aucun pari, aucun argent — flair et réputation.

   La couleur du domaine est portée par la var --dom (posée inline par carte,
   côté SSR et JS). Les tokens --pp-* (public-profile-theme.css) rendent la face
   theme-aware (clair/sombre) avec fallback = valeurs sombres du JSX. */

.zh-pronos-root {
  --pr-green: #00E58A;
  --pr-red: #FF3B5C;
  --pr-live: #00C2FF;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 4px 8px;
}
.zh-pronos-root[hidden] { display: none; }

/* ── En-tête : « Pronos publics · N votants abonnés » ─────────────────── */
.zh-pronos-head { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.zh-pronos-head-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zh-pronos-title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .3px;
  color: var(--pp-text, #FAFAFB);
}
.zh-pronos-sep { color: var(--pp-text-soft, rgba(250,250,251,.42)); }
.zh-pronos-voters {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--pp-text-muted, rgba(250,250,251,.62));
}
.zh-pronos-nobet {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--pp-text-soft, rgba(250,250,251,.42));
  text-transform: uppercase;
}

/* ── Grille de cartes ─────────────────────────────────────────────────── */
.zh-pronos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  align-content: start;
  overflow-y: auto;
  padding: 2px 4px 8px;
}

/* ── Carte prono (néon, coin coupé) ──────────────────────────────────── */
.zh-prono-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px 14px;
  background: var(--pp-card, #1A0E2E);
  border: 1.5px solid color-mix(in srgb, var(--dom, #7B3FF2) 40%, transparent);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dom, #7B3FF2) 13%, transparent),
    0 14px 34px color-mix(in srgb, var(--dom, #7B3FF2) 13%, transparent);
}
.zh-prono-edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dom, #7B3FF2), transparent 75%);
}

.zh-prono-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zh-prono-domain {
  padding: 4px 10px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: var(--dom, #7B3FF2);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.zh-prono-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1.5px solid var(--pr-live);
  color: var(--pr-live);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .8px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--pr-live) 33%, transparent);
}
.zh-prono-status--won { border-color: var(--pr-green); color: var(--pr-green); box-shadow: 0 0 10px color-mix(in srgb, var(--pr-green) 33%, transparent); }
.zh-prono-status--lost { border-color: var(--pr-red); color: var(--pr-red); box-shadow: 0 0 10px color-mix(in srgb, var(--pr-red) 33%, transparent); }
.zh-prono-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: lpulse 1.3s infinite;
}
@keyframes lpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.zh-prono-deadline {
  margin-left: auto;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .4px;
  color: var(--pp-text-muted, rgba(250,250,251,.62));
}

.zh-prono-text {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--pp-text, #FAFAFB);
}

/* ── Barre VS (verte / rouge) ─────────────────────────────────────────── */
.zh-prono-bar {
  position: relative;
  display: flex;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pp-card-lighter, #2D1A4F);
  box-shadow: inset 0 0 0 1px var(--pp-overlay-border, rgba(255,255,255,.12));
}
.zh-prono-bar-for {
  position: relative; /* ancre la pastille VS sur la frontière vert/rouge */
  /* min-width garantit qu'à 0% le petit segment garde la place du « 0% » + du VS ;
     le camp minoritaire n'affiche jamais que « 0% » (étroit), donc 48px suffisent. */
  min-width: 48px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pr-green) 80%, transparent), var(--pr-green));
  display: flex; align-items: center; padding-left: 10px;
  transition: width .35s ease;
}
.zh-prono-bar-against {
  flex: 1; min-width: 48px;
  background: linear-gradient(90deg, var(--pr-red), color-mix(in srgb, var(--pr-red) 80%, transparent));
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.zh-prono-bar-for .zh-prono-bar-pct { color: #04120C; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.zh-prono-bar-against .zh-prono-bar-pct { color: #160306; }
.zh-prono-bar-pct { font-family: "Space Grotesk", sans-serif; font-weight: 800; font-size: 14px; }
.zh-prono-vs {
  /* Enfant de .zh-prono-bar-for : toujours centré sur SON bord droit = la frontière
     vert/rouge. Comme les deux camps ont min-width 48px, la frontière reste ≥48px de
     chaque bord → le VS n'est jamais coupé, quel que soit le ratio (0% … 100%). */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 2;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pp-card, #1A0E2E);
  border: 2px solid var(--pp-text, #FAFAFB);
  display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800; font-size: 9px;
  color: var(--pp-text, #FAFAFB);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ── Boutons Pour / Contre ────────────────────────────────────────────── */
.zh-prono-actions { display: flex; gap: 8px; }
.zh-prono-vote {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase;
  transition: all .15s ease;
}
.zh-prono-vote--for {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%);
  background: color-mix(in srgb, var(--pr-green) 12%, transparent);
  color: var(--pr-green);
  border: 1.5px solid var(--pr-green);
}
.zh-prono-vote--for.is-active {
  background: var(--pr-green); color: #04120C;
  box-shadow: 0 0 16px color-mix(in srgb, var(--pr-green) 53%, transparent);
}
.zh-prono-vote--against {
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: color-mix(in srgb, var(--pr-red) 12%, transparent);
  color: var(--pr-red);
  border: 1.5px solid var(--pr-red);
}
.zh-prono-vote--against.is-active {
  background: var(--pr-red); color: #fff;
  box-shadow: 0 0 16px color-mix(in srgb, var(--pr-red) 53%, transparent);
}
.zh-prono-vote[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ── Pied : joueurs + partager ───────────────────────────────────────── */
.zh-prono-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--pp-overlay-border, rgba(255,255,255,.12));
}
.zh-prono-players {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 11px;
  color: var(--pp-text-muted, rgba(250,250,251,.62));
}
.zh-prono-share {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--pp-overlay, rgba(255,255,255,.06));
  border: 1px solid color-mix(in srgb, var(--dom, #7B3FF2) 33%, transparent);
  color: var(--dom, #7B3FF2);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 10.5px;
  letter-spacing: .6px; text-transform: uppercase;
  cursor: pointer;
}
.zh-prono-share:hover { background: var(--pp-overlay-strong, rgba(255,255,255,.1)); }

/* ── État vide ───────────────────────────────────────────────────────── */
.zh-pronos-empty { padding: 24px 4px; }
.zh-pronos-empty[hidden] { display: none; }
.zh-pronos-empty-card {
  text-align: center;
  padding: 28px 20px;
  border-radius: 14px;
  background: var(--pp-card, #1A0E2E);
  border: 1px solid var(--pp-border, rgba(168,85,247,.18));
}
.zh-pronos-empty-title {
  margin: 0 0 6px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800; font-size: 15px;
  color: var(--pp-text, #FAFAFB);
}
.zh-pronos-empty-text {
  margin: 0;
  font-size: 13px;
  color: var(--pp-text-muted, rgba(250,250,251,.62));
}

/* ── Toasts ───────────────────────────────────────────────────────────── */
.zh-pronos-toasts {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 60;
  pointer-events: none;
}
.zh-pronos-toast {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--pp-menu-bg, #1A0E2E);
  border: 1px solid var(--pp-border-strong, rgba(168,85,247,.4));
  color: var(--pp-text, #FAFAFB);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: zh-prono-toast-in .2s ease;
}
.zh-pronos-toast--error { border-color: var(--pr-red); }
@keyframes zh-prono-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .zh-pronos-grid { grid-template-columns: 1fr; }
}