/* ============================================================
   JISR.MEDIA — Widget Sondage
   Composant réutilisable, embarqué en HTML brut dans le corps
   markdown des articles. Voir src/components/Sondage.astro pour
   la version Astro de référence (props/labels) et public/js/jisr-sondage.js
   pour la logique de vote.
   ============================================================ */
.sondage-widget {
  border: 1px solid var(--jisr-gold, #C9A84C);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 2rem 0;
  background: #F7F3EA;
  font-family: var(--font-latin, 'Inter', sans-serif);
}
.sondage-widget[dir="rtl"] {
  font-family: var(--font-arabic, 'Amiri', serif);
}
.sondage-intro {
  font-weight: 600;
  color: #1C2333;
  margin-bottom: 1rem;
}
.sondage-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem 0;
}
.sondage-form legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1C2333;
}
.sondage-form label {
  display: block;
  margin: 0.35rem 0;
  cursor: pointer;
  color: #1C2333;
}
.sondage-form button {
  background: #1C2333;
  color: var(--jisr-gold, #C9A84C);
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.sondage-form button:hover {
  opacity: 0.9;
}
.sondage-thanks {
  font-weight: 600;
  color: #1C2333;
  margin-bottom: 0.75rem;
}
.sondage-bars {
  margin: 0;
  padding: 0;
}
.sondage-bars li {
  margin: 0.5rem 0;
  list-style: none;
  color: #1C2333;
  font-size: 14px;
}
.sondage-bar-track {
  background: #E2D8CB;
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
  margin-top: 2px;
}
.sondage-bar-fill {
  background: var(--jisr-gold, #C9A84C);
  height: 100%;
}
.sondage-results-block {
  margin-top: 1.1rem;
}
.sondage-results-block h4 {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 14px;
  font-weight: 700;
  color: #1C2333;
  margin: 0 0 0.4rem;
}

/* ============================================================
   Panneau flottant persistant (Layout.astro)
   Ancré à gauche en LTR, à droite en RTL. Repliable/fermable.
   ============================================================ */
.jisr-poll-float {
  position: fixed;
  top: 180px;
  width: 270px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  z-index: 150;
  background: #FFFFFF;
  border: 1px solid var(--jisr-gold, #C9A84C);
  border-radius: 10px;
  box-shadow: 0 10px 28px -8px rgba(11, 31, 58, 0.35);
}
.jisr-poll-float[dir="ltr"] { left: 16px; }
.jisr-poll-float[dir="rtl"] { right: 16px; }
.jisr-poll-float .sondage-widget {
  border: none;
  margin: 0;
  padding: 0.9rem;
  background: transparent;
  font-size: 13px;
}
.jisr-poll-float .sondage-intro { font-size: 12.5px; margin-bottom: 0.7rem; }
.jisr-poll-float .sondage-form legend { font-size: 12.5px; }
.jisr-poll-float .sondage-form label { font-size: 12.5px; margin: 0.25rem 0; }
.jisr-poll-float .sondage-form button { width: 100%; font-size: 12.5px; padding: 0.5rem; }
.jisr-poll-float .sondage-results-block h4 { font-size: 12.5px; }
.jisr-poll-float .sondage-bars li { font-size: 12px; }

.jisr-poll-float__head {
  background: var(--jisr-navy, #0B1F3A);
  color: var(--jisr-gold-light, #E8C85A);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 9px 9px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
}
.jisr-poll-float__close {
  background: none;
  border: none;
  color: var(--jisr-gold-light, #E8C85A);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

/* Sous 900px : le panneau latéral chevaucherait le contenu — on le masque
   et on ne garde que la version mobile (barre du bas), même seuil que jisr-layout.css. */
@media (max-width: 900px) {
  .jisr-poll-float { display: none !important; }
}

/* ============================================================
   Barre repliable mobile (< 900px)
   ============================================================ */
.jisr-poll-bar {
  display: none;
}
@media (max-width: 900px) {
  .jisr-poll-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: #FFFFFF;
    border-top: 2px solid var(--jisr-gold, #C9A84C);
    box-shadow: 0 -8px 20px -8px rgba(11, 31, 58, 0.3);
  }
  .jisr-poll-bar__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--jisr-navy, #0B1F3A);
    color: var(--jisr-gold-light, #E8C85A);
    font-size: 12.5px;
    font-weight: 700;
  }
  .jisr-poll-bar__tab .jisr-poll-bar__chev {
    font-size: 12px;
    transition: transform 0.2s;
  }
  .jisr-poll-bar.open .jisr-poll-bar__tab .jisr-poll-bar__chev {
    transform: rotate(180deg);
  }
  .jisr-poll-bar__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .jisr-poll-bar.open .jisr-poll-bar__body {
    max-height: 70vh;
    overflow-y: auto;
  }
  .jisr-poll-bar .sondage-widget {
    border: none;
    margin: 0;
    padding: 14px 16px;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jisr-poll-bar__body,
  .jisr-poll-bar__tab .jisr-poll-bar__chev {
    transition: none;
  }
}