/* ============================================================
   Le sondage : une fiche posée sur la page, aux couleurs du
   design qu'on est en train de regarder.
   ============================================================ */
.sondage{
  --sond-fond:#FFFFFF;--sond-texte:#1B1B1B;--sond-muet:#5A5A56;
  --sond-trait:#DDD9CE;--sond-accent:#B4261A;
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  padding:0;border:0;border-radius:12px;overflow:auto;
  background:var(--sond-fond);color:var(--sond-texte);
  font-family:ui-monospace,"JetBrains Mono","IBM Plex Mono",Menlo,monospace;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
}
.sondage::backdrop{background:rgba(12,10,8,.62);backdrop-filter:blur(3px)}
.sondage__in{padding:26px 26px 22px}
.sondage__titre{
  margin:0 0 6px;font-family:inherit;font-size:.9375rem;font-weight:700;letter-spacing:.02em;
}
.sondage__sous{margin:0 0 18px;font-size:.75rem;line-height:1.6;color:var(--sond-muet)}
.sondage__form{display:grid;gap:8px;margin:0}
.sondage__choix{
  display:grid;grid-template-columns:auto 30px 1fr;gap:0 12px;align-items:center;
  border:2px solid var(--sond-trait);border-radius:8px;padding:11px 13px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.sondage__choix:hover{border-color:var(--sond-accent)}
.sondage__choix input{accent-color:var(--sond-accent);width:16px;height:16px;margin:0;grid-row:1 / span 2}
.sondage__choix i{
  grid-row:1 / span 2;width:30px;height:19px;border-radius:3px;border:1px solid rgba(0,0,0,.2);
  background:linear-gradient(90deg,var(--a) 0 34%,var(--b) 34% 67%,var(--c) 67%);
}
.sondage__choix b{font-size:.78125rem;font-weight:700}
.sondage__choix small{font-size:.6875rem;color:var(--sond-muet);line-height:1.4}
.sondage__choix:has(input:checked){border-color:var(--sond-accent);background:color-mix(in srgb,var(--sond-accent) 7%,transparent)}
.sondage__etat{margin:16px 0 0;font-size:.75rem;line-height:1.6;color:var(--sond-muet);min-height:1.2em}
.sondage__etat b{color:var(--sond-texte)}
.sondage__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.sondage__envoi,.sondage__effacer,.sondage__fermer{
  font:inherit;font-size:.71875rem;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;border:2px solid var(--sond-texte);
  background:transparent;color:var(--sond-texte);cursor:pointer;text-decoration:none;
}
/* le bouton d'envoi n'existe que tant qu'il y a une voix à faire partir */
.sondage__envoi{background:var(--sond-texte);color:var(--sond-fond);border-color:var(--sond-texte)}
.sondage[data-etat="vide"] .sondage__envoi,
.sondage[data-etat="envoye"] .sondage__envoi{display:none}
.sondage[data-etat="vide"] .sondage__effacer{display:none}
.sondage[data-etat="envoye"] .sondage__etat b{color:var(--sond-accent)}
.sondage[data-etat="envoye"] .sondage__etat::before{content:"\2713  ";font-weight:700;color:var(--sond-accent)}
.sondage__effacer{border-color:var(--sond-trait);color:var(--sond-muet)}
.sondage__fermer{margin-left:auto;border-color:var(--sond-trait);color:var(--sond-muet)}
.sondage__note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--sond-trait);font-size:.65625rem;line-height:1.6;color:var(--sond-muet)}

/* le bouton d'appel, dans la barre des designs */
.bd-voter{
  flex:none;padding:7px 14px;border:2px solid currentColor;border-radius:999px;
  text-decoration:none;white-space:nowrap;font-weight:700;font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;transition:transform .15s;
  /* c'est un <button> : il n'hérite ni de la police ni de la couleur */
  font-family:inherit;color:inherit;background:none;cursor:pointer;line-height:1.2;
}
.bd-voter:hover{transform:translateY(-1px)}
.bd-voter::before{content:"\2691  "}

/* chaque design habille la fiche */
html[data-design="identite"] .sondage{--sond-fond:#F5F2EA;--sond-trait:#C8C2B0;--sond-accent:#B4261A}
html[data-design="manuscrit"] .sondage{--sond-fond:#EBE1C9;--sond-texte:#241F1B;--sond-muet:#5E554C;--sond-trait:#C9BB9A;--sond-accent:#6B1B2C}
html[data-design="riso"] .sondage,html[data-design="ultime"] .sondage{--sond-fond:#F4EFE3;--sond-trait:#CFC8B6;--sond-accent:#FF4D9E}
html[data-design="immersif"] .sondage{--sond-fond:#12151D;--sond-texte:#ECEAE4;--sond-muet:#A2A7B2;--sond-trait:#262B36;--sond-accent:#8FA8FF}