/* Complément à ../elections/assets/elections.css, spécifique aux sondages : options de réponse et barres de résultats façon Telegram (remplissage proportionnel, pourcentage, coche sur son propre choix). */ /* Le vrai menu du site (assets/bootstrap + assets/theme, chargés dans ) pose un fond blanc par défaut sur les sections qui suivent : on le neutralise ici pour garder le fond sombre de l'outil de sondages sous le menu. */ .page-head, main.wrap, .site-footer { background: transparent; } /* Le module de menu flotte en position absolute par-dessus la page (comme sur le reste du site, où il survole une image de fond) : ces pages n'ont pas ce bandeau, donc on pousse le contenu sous la hauteur du menu pour ne pas être recouvert. */ .page-head { padding-top: 7rem; } @media (max-width: 767px) { .page-head { padding-top: 5.5rem; } } /* ---------- Accordéon des sondages (page liste) ---------- */ .poll-card { border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 14px; margin-bottom: 12px; padding: 14px 16px; background: rgba(255,255,255,.02); } .poll-card summary { cursor: pointer; list-style: none; user-select: none; display: flex; flex-direction: column; gap: 4px; } .poll-card summary::-webkit-details-marker { display: none; } .poll-card-caret { display: inline-block; margin-right: 8px; font-size: .8em; color: var(--muted, #9ca3af); transition: transform .15s ease; } .poll-card[open] .poll-card-caret { transform: rotate(90deg); } .poll-card-body { margin-top: 14px; } .poll-card-body .card:first-child { margin-top: 0; } .poll-question { margin-bottom: 22px; } .poll-question .q-label { font-weight: 700; margin-bottom: 4px; } .poll-question .q-required { color: var(--violet-2, #c471ed); margin-left: 4px; } .poll-option { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; margin-bottom: 8px; cursor: pointer; user-select: none; background: rgba(255,255,255,.02); transition: border-color .15s; } .poll-option:hover { border-color: var(--violet-2, #c471ed); } .poll-option.selected { border-color: var(--violet, #a855f7); background: rgba(168,85,247,.1); } .poll-option input { accent-color: var(--violet, #a855f7); width: 16px; height: 16px; flex: 0 0 auto; } .poll-result { position: relative; padding: 7px 12px; border-radius: 10px; margin-bottom: 6px; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.1)); background: rgba(255,255,255,.02); } .poll-result.mine { border-color: var(--violet, #a855f7); } .poll-result .bar-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, rgba(168,85,247,.28), rgba(196,113,237,.16)); transition: width .5s ease; } /* margin:0 + flex-wrap:nowrap en dur : bootstrap.min.css (chargé sur ces pages pour le vrai menu du site) définit sa propre classe .row (grille) avec des marges négatives et flex-wrap:wrap — sans ces deux propriétés fixées ici, notre .row héritait des siennes, ce qui élargissait la ligne au-delà de .poll-result (overflow:hidden) et poussait le compteur hors champ, invisible. Le libellé (parfois long, ex. "Oui, j'ai besoin qu'on me prenne") peut quand même passer à la ligne sur lui-même : c'est .label qui porte flex-shrink, pas .row. */ .poll-result .row { position: relative; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 8px; margin: 0; } /* width/max-width/padding en dur : la même feuille Bootstrap force aussi `.row > * {width:100%; max-width:100%; flex-shrink:0; padding-left/right:.75rem}` (règle de grille, colonnes empilées par défaut avant un .col-*) — sans ce reset, .label ET .right héritaient chacun d'une largeur à 100% de la ligne, s'empilaient l'un sous l'autre au lieu de se partager l'espace, et le second (.right, poussé après le premier qui occupait déjà toute la largeur) débordait hors de .poll-result (overflow:hidden), invisible. */ .poll-result .label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; min-width: 0; width: auto; max-width: none; padding: 0; flex-shrink: 1; } .poll-result .right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; width: auto; max-width: none; padding: 0; } .poll-result .pct { font-weight: 700; font-size: .8rem; color: var(--muted, #9ca3af); white-space: nowrap; } /* Qui a répondu ça, sous le libellé, directement visible (plus de bouton ni de modale à ouvrir) : une seule ligne compacte plutôt qu'une ligne à part entière pour le compteur. */ .poll-result .poll-voters-list { position: relative; margin-top: 2px; font-size: .76rem; color: var(--muted, #9ca3af); } .btn.wide { display: flex; width: 100%; } .poll-free-answer { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); } .poll-free-answer:last-child { border-bottom: none; } .question-editor { border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; padding: 14px; margin-bottom: 10px; } .question-editor .row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .question-editor .row .input { flex: 1 1 200px; } /* Le menu (haut de page) est maintenant le module Mobirise réel du site public, voir assets/menu.css. */