/*
  Module: Sondages – Mixer UI
  (CSS extrait du hookHead pour réduire la "pollution" du HTML)

  L'image du fader est pilotée par :
  --sondages-fader-url: url('...');
  Cette variable est définie inline par le PHP sur .sondages-card (chemin fiable).
*/

/* Sondages – Mixer UI */
.sondages-wrap{ display:grid; gap:18px; --sondages-handle-w:38px; --sondages-handle-h:19px; }
.sondages-wrap.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.sondages-panel{ min-width:0; }
@media (max-width: 980px){ .sondages-wrap.cols-2{ grid-template-columns: 1fr; } }
.sondages-card{ background:var(--tmtl-card, rgba(255,255,255,.06)); border:1px solid var(--tmtl-border-subtle, rgba(255,255,255,.10)); border-radius: var(--tmtl-radius, 16px); padding:16px; box-shadow: 0 12px 40px rgba(0,0,0,.35) inset; overflow:hidden; }
.sondages-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sondages-title{ margin:0; font-size:22px; line-height:1.15; color: var(--theme-graph-accent, var(--tmtl-accent, #ff2fd4)); }
.sondages-total{ font-size:14px; color: var(--theme-graph-muted, var(--tmtl-text-muted, rgba(255,255,255,.7))); white-space:nowrap; margin-top:2px; }
.sondages-vote{ display:flex; gap:10px; align-items:center; margin:12px 0 12px 0; }
.sondages-card-cols-2 .sondages-vote{ flex-wrap:wrap; }
.sondages-vote label{ font-size:14px; color: var(--theme-graph-muted, var(--tmtl-text-muted, rgba(255,255,255,.7))); }
.sondages-vote select{ flex:1; min-width: 160px; padding:10px 12px; border-radius: 14px; border:1px solid var(--tmtl-border-subtle, rgba(255,255,255,.12)); background: color-mix(in srgb, var(--theme-graph-bg, rgba(0,0,0,.35)) 45%, white); color: var(--tmtl-text, #fff); }
.sondages-vote button{ padding:10px 16px; border-radius: 14px; border:1px solid var(--tmtl-border-subtle, rgba(255,255,255,.12)); background: linear-gradient(135deg, var(--theme-graph-primary, #b27101), var(--theme-graph-secondary, #f29a02)); color:#fff; font-weight:600; cursor:pointer; }
.sondages-vote button:disabled{ opacity:.55; cursor:not-allowed; }
.sondages-msg{ margin:8px 0 0 0; font-size:14px; color: var(--theme-graph-muted, var(--tmtl-text-muted, rgba(255,255,255,.7))); }

/* Top 3 (résultats) */
.sondages-top3{ margin-top:14px; padding:14px 16px; border-radius:14px; background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10); }
.sondages-top3-title{ font-size:22px; line-height:1.1; font-weight:900; text-align:center; margin:0 0 10px 0; color: var(--theme-graph-accent, var(--theme-accent, #ff2fd4)); text-shadow: 0 0 18px color-mix(in srgb, var(--theme-graph-accent, #ff2fd4) 55%, transparent); }
.sondages-top3-line{ font-size:18px; line-height:1.25; font-weight:800; text-align:center; color: var(--tmtl-text, #fff); }
.sondages-top3-rank{ color: var(--theme-graph-secondary, var(--theme-graph-accent, #ff2fd4)); }

/* Desktop : rendu TOP3 plus proche du modele (texte plus grand, carte plus "light") */
@media (min-width: 721px){
  .sondages-top3{
    margin-top:18px;
    padding:0;
    background: transparent;
    border:0;
    border-radius:0;
  }
  .sondages-top3-title{
    font-size:34px;
    margin:0 0 14px 0;
    text-shadow:
      0 0 22px color-mix(in srgb, var(--theme-graph-accent, #ff2fd4) 70%, transparent),
      0 0 46px color-mix(in srgb, var(--theme-graph-accent, #ff2fd4) 35%, transparent);
  }
  .sondages-top3-line{
    font-size:22px;
    line-height:1.35;
    color: var(--theme-graph-accent, var(--theme-accent, #ff2fd4));
    text-shadow: 0 0 16px color-mix(in srgb, var(--theme-graph-accent, #ff2fd4) 35%, transparent);
  }
  .sondages-top3-rank{ font-weight:900; }
}
.sondages-inner{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap:14px; align-items:start; }
.sondages-layout-compact .sondages-title{ font-size:20px; }
@media (max-width: 980px){ .sondages-inner{ grid-template-columns: 1fr; } }
.mixer-board{ position:relative; display:grid; grid-template-columns: repeat(var(--mixer-cols, 12), minmax(0,1fr)); gap: var(--sondages-track-gap, 0px); padding:10px 10px 14px 10px; border-radius: 14px; background: radial-gradient(900px 320px at 50% 0%, rgba(255,255,255,.06), transparent 70%); }
@media (max-width: 720px){ .mixer-board{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mixer-chan{ position:relative; height:330px; border-radius: 14px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
/* VU: fin & long (centré) */
.mixer-vu{ position:absolute; left:50%; transform:translateX(-50%); top:10px; width:14px; height:148px; display:flex; flex-direction:column-reverse; gap:2px; padding:4px 0; }
.mixer-led{ height:6px; border-radius: 2px; opacity:.10; filter: saturate(1.2); box-shadow: 0 0 0 rgba(0,0,0,0); }
.mixer-led.on{ opacity:1; box-shadow: 0 0 12px color-mix(in srgb, currentColor 60%, transparent); }
.mixer-fader{ position:absolute; left:0; right:0; top:170px; bottom:58px; display:flex; align-items:center; justify-content:center; }
/* Glissière fine (8-10px) */
.mixer-track{ position:relative; width:10px; height:100%; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
.mixer-level{ position:absolute; left:1px; right:1px; bottom:1px; border-radius:999px; background: linear-gradient(180deg, var(--theme-graph-accent, #ff2fd4), var(--theme-graph-secondary, #f29a02)); opacity:.92; height:0%; }
/* Fader : placé au sommet du niveau (pas de "bonbon") */
.mixer-handle{ position:absolute; left:50%; transform: translate(-50%, 0); width: var(--sondages-handle-w, 38px); height: var(--sondages-handle-h, 19px); background: var(--sondages-fader-url, url("../fader.png")) center/contain no-repeat; z-index:5; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); bottom:0%; }
.mixer-footer{ position:absolute; left:0; right:0; bottom:0; padding:10px 0 10px 0; border-top:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, transparent, rgba(0,0,0,.25)); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; }
.mixer-name{ width:100%; display:flex; justify-content:center; text-align:center; font-size:12px; line-height:1; color: var(--tmtl-text, #fff); font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; cursor:help; }
.mixer-pct{ width:100%; display:flex; justify-content:center; text-align:center; margin-top:6px; font-size:12px; color: var(--theme-graph-muted, var(--tmtl-text-muted, rgba(255,255,255,.7))); }

/* Desktop : footer encore plus centre (labels + score) */
@media (min-width: 721px){
  .mixer-footer{ justify-content:center; padding:8px 0 10px 0; }
  .mixer-pct{ margin-top:4px; }
}