/* ════════════════════════════════════════════════════════════════
 * RZ Pronos — Sondages (frontend)
 * Style brand It's Rugby : teal #1C3D34 / vanilla #F2E5D2 / g-bright #8ED968
 * ════════════════════════════════════════════════════════════════ */

.rzu-sondage {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-top: 4px solid var(--teal, #1C3D34);
    box-shadow: 0 2px 12px rgba(28, 61, 52, 0.06);
    padding: 16px 18px 14px;
    max-width: 720px;
    margin: 0 auto;
}

.rzu-sondage-question {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.rzu-sondage-form {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

/* Layout compact : options en flex-wrap (chips), bouton à droite si la place */
.rzu-sondage-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Chaque option = chip cliquable, ligne unique sur la plupart des cas */
.rzu-sondage-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink, #1A1A1A);
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.rzu-sondage-option:hover {
    border-color: var(--teal, #1C3D34);
    background: var(--vanilla, #F2E5D2);
}
.rzu-sondage-option:has(input:checked) {
    border-color: var(--teal, #1C3D34);
    background: var(--teal, #1C3D34);
    color: var(--white, #fff);
    font-weight: 700;
}
.rzu-sondage-option input[type="radio"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    accent-color: var(--g-bright, #8ED968);
    cursor: pointer;
}
.rzu-sondage-option input[type="radio"]:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 2px;
}

/* Variante menu déroulant (sondages avec plus de 6 options : Top 14, Pro D2…) */
.rzu-sondage-options--select {
    flex: 1 1 100%;
    min-width: 0;
}
.rzu-sondage-select {
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    color: var(--teal, #1C3D34);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%231C3D34' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    padding-right: 36px;
}
.rzu-sondage-select:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 2px;
    border-color: var(--teal, #1C3D34);
}

.rzu-sondage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--teal, #1C3D34);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(28, 61, 52, 0.18);
    flex: 0 0 auto;
    align-self: stretch;
}
.rzu-sondage-btn:hover:not([disabled]) {
    background: var(--teal-dk, #172713);
    box-shadow: 0 3px 10px rgba(28, 61, 52, 0.28);
}
.rzu-sondage-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.rzu-sondage-btn:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 3px;
}

.rzu-sondage-error {
    margin: 12px 0 0;
    color: var(--red, #C0392B);
    font-size: 13px;
    font-weight: 600;
}
.rzu-sondage-error:not(:empty) {
    position: static;
    width: auto;
    height: auto;
    margin: 12px 0 0;
    clip: auto;
    padding: 8px 12px;
    background: var(--red-lt, #FDECEA);
    border-left: 3px solid var(--red, #C0392B);
    white-space: normal;
}

/* Résultats — layout compact, label/bar/pct sur une seule ligne */
.rzu-sondage-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Restaure le masquage HTML5 [hidden] que `display:flex` ci-dessus aurait neutralisé */
.rzu-sondage-results[hidden],
.rzu-sondage-form[hidden] {
    display: none !important;
}

.rzu-sondage-bar-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(120px, 2fr) auto;
    align-items: center;
    gap: 10px;
}

.rzu-sondage-bar-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink, #1A1A1A);
    line-height: 1.3;
    word-break: break-word;
}

.rzu-sondage-bar-wrap {
    height: 8px;
    background: var(--vanilla, #F2E5D2);
    overflow: hidden;
    position: relative;
}
.rzu-sondage-bar {
    height: 100%;
    width: var(--rzu-pct, 0%);
    background: linear-gradient(90deg, var(--teal, #1C3D34) 0%, #2F6F23 100%);
    transition: width 0.4s ease;
    min-width: 2px;
}

.rzu-sondage-bar-pct {
    font-size: 12px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Mobile : repasse en 2 lignes (label seul, puis bar+%) sous 480px */
@media (max-width: 480px) {
    .rzu-sondage-bar-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label label" "bar pct";
        gap: 2px 8px;
    }
    .rzu-sondage-bar-label { grid-area: label; }
    .rzu-sondage-bar-wrap  { grid-area: bar; }
    .rzu-sondage-bar-pct   { grid-area: pct; }
}

.rzu-sondage-meta {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--border, #C4C4C4);
    color: var(--muted, #6B6B6B);
    font-size: 11px;
    font-weight: 600;
}
.rzu-sondage-meta [data-rzu-total] {
    color: var(--teal, #1C3D34);
    font-weight: 800;
}
.rzu-sondage-closed {
    color: var(--red, #C0392B);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* CTA visiteur non connecté — markup retiré (sondages ouverts à tous, anonymes inclus) */

/* Animation chargement */
.rzu-sondage.is-loading .rzu-sondage-form,
.rzu-sondage.is-loading .rzu-sondage-results {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------------------------------------------------------
 * Page publique /sondages/
 * --------------------------------------------------------- */
.rzu-page--sondages {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

/* Bannière historique "Devenez membre pour voter" supprimée :
   les sondages sont maintenant ouverts à tous (anonymes inclus). */

/* Liste sondages dépliable — 1 ligne par sondage, click pour expand */
.rzu-sondages-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rzu-sondages-item {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-left: 4px solid var(--teal, #1C3D34);
    transition: box-shadow 0.15s ease, border-left-color 0.15s ease;
}
.rzu-sondages-item:hover {
    border-left-color: var(--g-bright, #8ED968);
    box-shadow: 0 2px 8px rgba(28, 61, 52, 0.08);
}

.rzu-sondages-item-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.rzu-sondages-item-head:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: -3px;
}

.rzu-sondages-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--teal, #1C3D34);
    line-height: 1.35;
    word-break: break-word;
}

.rzu-sondages-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.rzu-sondages-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.rzu-sondages-item-badge--open {
    background: var(--g-bright, #8ED968);
    color: var(--teal-dk, #172713);
}
.rzu-sondages-item-badge--closed {
    background: var(--vanilla-d, #E8D8C0);
    color: var(--muted, #6B6B6B);
}

.rzu-sondages-item-votes {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6B6B6B);
    font-variant-numeric: tabular-nums;
}

.rzu-sondages-item-voted {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--teal, #1C3D34);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.rzu-sondages-item-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--teal, #1C3D34);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.15s ease;
}
.rzu-sondages-item-head:hover .rzu-sondages-item-action {
    background: var(--teal-dk, #172713);
}
.rzu-sondages-item-chev {
    transition: transform 0.18s ease;
    display: inline-block;
    line-height: 1;
}
.rzu-sondages-item-head[aria-expanded="true"] .rzu-sondages-item-chev {
    transform: rotate(180deg);
}

/* Panneau dépliable d'un sondage : reste blanc (background opaque) pour
   ne pas laisser transparaître l'habillage publicitaire (cf. memory rule). */
.rzu-sondages-item-detail {
    padding: 12px 16px 14px;
    border-top: 1px dashed var(--border, #C4C4C4);
    background: var(--white, #fff);
}
.rzu-sondages-item-detail .rzu-sondage {
    border: none;
    box-shadow: none;
    border-top: none;
    padding: 0;
    background: transparent;
    max-width: none;
}
/* La question est déjà visible dans l'en-tête de l'item (toggle), inutile de la
   répéter dans le panneau dépliable — on la cache uniquement dans ce contexte. */
.rzu-sondages-item-detail .rzu-sondage-question {
    display: none;
}

/* Item replié → fond légèrement teinté pour signaler interactivité */
.rzu-sondages-item:has(.rzu-sondages-item-head[aria-expanded="true"]) {
    border-left-color: var(--g-bright, #8ED968);
    box-shadow: 0 4px 14px rgba(28, 61, 52, 0.12);
}

/* Responsive */
@media (max-width: 720px) {
    .rzu-sondages-item-head {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 12px 14px;
    }
    .rzu-sondages-item-title {
        flex: 1 1 100%;
        font-size: 14px;
    }
    .rzu-sondages-item-meta {
        flex: 1 1 auto;
        gap: 8px;
    }
    .rzu-sondages-item-action {
        flex: 0 0 auto;
        font-size: 11px;
        padding: 5px 10px;
    }
}

@media (max-width: 540px) {
    .rzu-page--sondages {
        padding: 24px 16px 48px;
    }
    .rzu-sondages-banner {
        padding: 14px 16px;
    }
    .rzu-sondages-item-detail {
        padding: 0 14px 14px;
    }
}

/* Compact (pour la home, dans le bloc #sondage existant) */
.sondage-box .rzu-sondage,
.rzu-sondage--compact {
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Responsive */
@media (max-width: 540px) {
    .rzu-sondage {
        padding: 18px 18px 16px;
    }
    .rzu-sondage-question {
        font-size: 15px;
    }
    .rzu-sondage-btn {
        width: 100%;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rzu-sondage-bar,
    .rzu-sondage-option,
    .rzu-sondage-btn {
        transition: none;
    }
}