/**
 * @package     Sondage.Site
 * @subpackage  com_sondage
 *
 * Feuille de style du frontend : liste des sondages + formulaire de réponse.
 * Reprend les mêmes tokens de design que la vue "liste" pour une cohérence
 * visuelle sur tout le composant.
 */

.sondage-site {
    --sv-primary: #1a73e8;
    --sv-primary-hover: #1557b0;
    --sv-primary-light: #e8f0fe;
    --sv-success: #34a853;
    --sv-danger: #ea4335;
    --sv-warning: #fbbc04;
    --sv-gray-50: #f8f9fa;
    --sv-gray-100: #f1f3f4;
    --sv-gray-200: #dadce0;
    --sv-gray-300: #bdc1c6;
    --sv-gray-400: #9aa0a6;
    --sv-gray-500: #5f6368;
    --sv-gray-600: #202124;
    --sv-radius: 10px;
    --sv-radius-sm: 6px;
    --sv-shadow-sm: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    --sv-shadow-md: 0 2px 6px 2px rgba(60,64,67,.15);
    --sv-font: 'Google Sans', Roboto, Arial, sans-serif;

    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 56px;
    font-family: var(--sv-font);
    color: var(--sv-gray-600);
    box-sizing: border-box;
}

.sondage-site *,
.sondage-site *::before,
.sondage-site *::after {
    box-sizing: border-box;
}

/* ===== NAVIGATION RETOUR ===== */
.sondage-site .sondage-back {
    margin: 0 0 16px;
}

.sondage-site .sondage-back a {
    color: var(--sv-gray-500);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .2s;
}

.sondage-site .sondage-back a:hover {
    color: var(--sv-primary);
}

/* ===== EN-TÊTE ===== */
.sondage-site .sondage-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    background: var(--sv-primary-light);
    color: var(--sv-primary);
    margin-bottom: 10px;
}

.sondage-site .sondage-page-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--sv-gray-600);
}

.sondage-site .sondage-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sv-gray-500);
    margin: 0 0 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sv-gray-200);
}

/* ===== ALERTES (déjà répondu / merci) ===== */
.sondage-site .sondage-alert {
    padding: 20px 22px;
    border-radius: var(--sv-radius);
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sondage-site .sondage-alert::before {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.sondage-site .sondage-alert-success {
    background: #e6f4ea;
    color: #1e7e34;
    border: 1px solid #b7e1c1;
}

.sondage-site .sondage-alert-success::before {
    content: '✓';
    color: var(--sv-success);
    font-weight: 700;
}

.sondage-site .sondage-alert-info {
    background: var(--sv-primary-light);
    color: #0b4ea2;
    border: 1px solid #bcd8fb;
}

.sondage-site .sondage-alert-info::before {
    content: 'ℹ';
    color: var(--sv-primary);
    font-weight: 700;
}

/* ===== CONFIRMATION (message de remerciement) ===== */
.sondage-site .sondage-confirmation {
    padding: 44px 32px 36px;
    border-radius: var(--sv-radius);
    border: 1px solid var(--sv-gray-200);
    background: #fff;
    text-align: center;
    animation: sondageConfirmIn .4s ease-out;
}

@keyframes sondageConfirmIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sondage-site .sondage-confirmation-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
}

.sondage-site .sondage-confirmation-icon svg {
    width: 100%;
    height: 100%;
}

.sondage-site .sondage-confirmation-icon-circle {
    stroke: var(--sv-success);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: sondageCircleDraw .5s ease-out forwards;
}

.sondage-site .sondage-confirmation-icon-check {
    stroke: var(--sv-success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: sondageCheckDraw .3s .4s ease-out forwards;
}

@keyframes sondageCircleDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes sondageCheckDraw {
    to { stroke-dashoffset: 0; }
}

.sondage-site .sondage-confirmation-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--sv-gray-600);
    margin: 0 0 10px;
}

.sondage-site .sondage-confirmation-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sv-gray-500);
    margin: 0 0 26px;
}

.sondage-site .sondage-connexion-requise p {
    margin: 0 0 18px;
}

/* ===== INDICATEUR DE PAGE ===== */
.sondage-site .sondage-page-indicator {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--sv-primary);
    background: var(--sv-primary-light);
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 14px;
}

/* ===== NAVIGATION ENTRE PAGES ===== */
.sondage-site .sondage-page-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sv-gray-100);
}

.sondage-site .sondage-page-nav .sondage-btn:only-child {
    margin-left: auto;
}

.sondage-site .sondage-btn-outline {
    background: #fff;
    color: var(--sv-gray-500);
    border-color: var(--sv-gray-200);
    box-shadow: none;
}

.sondage-site .sondage-btn-outline:hover {
    border-color: var(--sv-gray-300);
    color: var(--sv-gray-600);
    background: var(--sv-gray-50);
}

/* ===== QUESTION INVALIDE (validation JS) ===== */
.sondage-site .sondage-question.sondage-question-invalid {
    background: #fdecea;
    border-radius: var(--sv-radius-sm);
    padding-left: 14px;
    padding-right: 14px;
    margin-left: -14px;
    margin-right: -14px;
    box-shadow: inset 3px 0 0 var(--sv-danger);
}

.sondage-site .sondage-question.sondage-question-invalid .sondage-question-label {
    color: var(--sv-danger);
}

/* ===== FORMULAIRE / PAGES ===== */
.sondage-site .sondage-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sondage-site .sondage-page-block {
    background: #fff;
    border: 1px solid var(--sv-gray-200);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
    padding: 26px 28px;
}

.sondage-site .sondage-page-block + .sondage-page-block {
    margin-top: 0;
}

.sondage-site .sondage-page-block-title {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--sv-gray-600);
}

.sondage-site .sondage-page-block-desc {
    font-size: 14px;
    color: var(--sv-gray-500);
    margin: 0 0 20px;
    line-height: 1.5;
}

/* ===== QUESTIONS ===== */
.sondage-site .sondage-question {
    padding: 18px 0;
    border-top: 1px solid var(--sv-gray-100);
}

.sondage-site .sondage-page-block > .sondage-question:first-of-type {
    border-top: none;
    padding-top: 4px;
}

.sondage-site .sondage-question-label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--sv-gray-600);
    margin-bottom: 12px;
    line-height: 1.45;
}

.sondage-site .sondage-required {
    color: var(--sv-danger);
    margin-left: 3px;
}

.sondage-site .sondage-question-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sondage-site .sondage-text-muted {
    color: var(--sv-gray-400);
    font-size: 13px;
    font-style: italic;
}

/* ===== CHAMPS TEXTE / EMAIL / NOMBRE / DATE ===== */
.sondage-site .sondage-input,
.sondage-site .sondage-select {
    width: 100%;
    max-width: 460px;
    padding: 11px 14px;
    border: 1px solid var(--sv-gray-200);
    border-radius: var(--sv-radius-sm);
    font-size: 14px;
    font-family: var(--sv-font);
    color: var(--sv-gray-600);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.sondage-site .sondage-input:focus,
.sondage-site .sondage-select:focus {
    outline: none;
    border-color: var(--sv-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.sondage-site .sondage-input::placeholder {
    color: var(--sv-gray-400);
}

.sondage-site .sondage-input-sm,
.sondage-site .sondage-select-sm {
    max-width: 220px;
}

.sondage-site .sondage-textarea {
    min-height: 110px;
    max-width: 100%;
    resize: vertical;
    font-family: inherit;
}

/* ===== CURSEUR(S) : carte + badge de valeur + piste remplie ===== */
.sondage-site .sondage-curseurs-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sondage-site .sondage-slider-card {
    max-width: 460px;
    padding: 16px 18px;
    background: var(--sv-gray-50);
    border: 1px solid var(--sv-gray-200);
    border-radius: var(--sv-radius-sm);
    transition: border-color .15s;
}

.sondage-site .sondage-slider-card:hover {
    border-color: var(--sv-gray-300);
}

.sondage-site .sondage-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sondage-site .sondage-curseur-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--sv-gray-600);
}

.sondage-site .sondage-slider-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 3px 11px;
    border-radius: 12px;
    background: var(--sv-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.sondage-site .sondage-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--sv-gray-200);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.sondage-site .sondage-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sv-primary);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.sondage-site .sondage-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sv-primary);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.sondage-site .sondage-range::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.sondage-site .sondage-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sv-gray-400);
    margin-top: 8px;
}

/* ===== SCORE NPS ===== */
.sondage-site .sondage-nps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sondage-site .sondage-nps-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sondage-site .sondage-nps-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sondage-site .sondage-nps-item span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--sv-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--sv-gray-500);
    transition: all .15s;
}

.sondage-site .sondage-nps-item:hover span {
    border-color: var(--sv-primary);
    color: var(--sv-primary);
}

.sondage-site .sondage-nps-item input:checked + span {
    background: var(--sv-primary);
    border-color: var(--sv-primary);
    color: #fff;
}

.sondage-site .sondage-nps-labels {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: var(--sv-gray-500);
}

/* ===== NOTATION PAR ÉTOILES ===== */
.sondage-site .sondage-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
    font-size: 30px;
}

.sondage-site .sondage-stars input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sondage-site .sondage-stars label {
    color: var(--sv-gray-300);
    cursor: pointer;
    transition: color .15s, transform .1s;
    line-height: 1;
}

.sondage-site .sondage-stars label:hover,
.sondage-site .sondage-stars label:hover ~ label {
    color: var(--sv-warning);
    transform: scale(1.08);
}

.sondage-site .sondage-stars input:checked ~ label {
    color: var(--sv-warning);
}

.sondage-site .sondage-notation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: var(--sv-gray-50);
    border-radius: var(--sv-radius-sm);
    border: 1px solid var(--sv-gray-100);
}

.sondage-site .sondage-notation-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--sv-gray-600);
}

.sondage-site .sondage-notation-item .sondage-stars {
    font-size: 24px;
}

/* ===== CHOIX UNIQUE / MULTIPLE ===== */
.sondage-site .sondage-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--sv-gray-200);
    border-radius: var(--sv-radius-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--sv-gray-600);
    transition: border-color .15s, background .15s;
}

.sondage-site .sondage-choice:hover {
    border-color: var(--sv-primary);
    background: var(--sv-primary-light);
}

.sondage-site .sondage-choice input[type="radio"],
.sondage-site .sondage-choice input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sv-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sondage-site .sondage-choice:has(input:checked) {
    border-color: var(--sv-primary);
    background: var(--sv-primary-light);
}

/* ===== CHOIX PAR IMAGE ===== */
.sondage-site .sondage-image-grid {
    display: grid;
    gap: 16px;
}

.sondage-site .sondage-image-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    gap: 8px;
}

.sondage-site .sondage-image-choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sondage-site .sondage-image-thumb {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sv-gray-50);
    border: 2px solid var(--sv-gray-200);
    border-radius: var(--sv-radius-sm);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.sondage-site .sondage-image-choice input:checked + .sondage-image-thumb {
    border-color: var(--sv-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.sondage-site .sondage-image-choice:hover .sondage-image-thumb {
    border-color: var(--sv-gray-300);
}

.sondage-site .sondage-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sondage-site .sondage-image-caption {
    font-size: 13px;
    color: var(--sv-gray-500);
    font-weight: 500;
}

/* ===== CLASSEMENT (glisser-déposer) ===== */
.sondage-site .sondage-rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sondage-site .sondage-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--sv-gray-50);
    border: 1px solid var(--sv-gray-200);
    border-radius: var(--sv-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}

.sondage-site .sondage-rank-item:hover {
    border-color: var(--sv-gray-300);
}

.sondage-site .sondage-rank-drag {
    cursor: grab;
    color: var(--sv-gray-400);
    font-size: 18px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

.sondage-site .sondage-rank-drag:active {
    cursor: grabbing;
}

.sondage-site .sondage-rank-number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sv-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.sondage-site .sondage-rank-label {
    font-size: 14px;
    color: var(--sv-gray-600);
    flex: 1;
}

.sondage-site .sondage-rank-hint {
    margin-top: 8px;
}

.sondage-site .sondage-rank-ghost {
    opacity: .4;
    background: var(--sv-primary-light);
}

.sondage-site .sondage-rank-chosen {
    box-shadow: var(--sv-shadow-md);
    border-color: var(--sv-primary);
}

/* ===== ANCIENNE VARIANTE (liste déroulante, conservée par compatibilité) ===== */
.sondage-site .sondage-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--sv-gray-50);
    border-radius: var(--sv-radius-sm);
}

.sondage-site .sondage-rank-row span {
    font-size: 14px;
    color: var(--sv-gray-600);
}

/* ===== MATRICE ===== */
.sondage-site .sondage-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

.sondage-site .sondage-matrix th,
.sondage-site .sondage-matrix td {
    padding: 10px 12px;
    border: 1px solid var(--sv-gray-200);
    text-align: center;
}

.sondage-site .sondage-matrix td:first-child,
.sondage-site .sondage-matrix th:first-child {
    text-align: left;
}

.sondage-site .sondage-matrix th {
    background: var(--sv-gray-50);
    color: var(--sv-gray-500);
    font-weight: 500;
}

.sondage-site .sondage-matrix input[type="radio"],
.sondage-site .sondage-matrix input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--sv-primary);
    cursor: pointer;
}

/* ===== ASSOCIATION ===== */
.sondage-site .sondage-assoc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--sv-gray-50);
    border-radius: var(--sv-radius-sm);
}

.sondage-site .sondage-assoc-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--sv-gray-600);
    min-width: 140px;
    flex-shrink: 0;
}

.sondage-site .sondage-assoc-row .sondage-select {
    max-width: none;
    flex: 1;
}

/* ===== BOUTONS ===== */
.sondage-site .sondage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: var(--sv-radius-sm);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--sv-font);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}

.sondage-site .sondage-btn-primary {
    background: var(--sv-primary);
    color: #fff;
    box-shadow: var(--sv-shadow-sm);
}

.sondage-site .sondage-btn-primary:hover {
    background: var(--sv-primary-hover);
    color: #fff;
}

.sondage-site .sondage-btn-submit {
    margin-top: 8px;
    align-self: flex-start;
}

.sondage-site .sondage-submit-wrapper {
    display: flex;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 560px) {
    .sondage-site {
        padding: 16px 12px 40px;
    }
    .sondage-site .sondage-page-block {
        padding: 20px 18px;
    }
    .sondage-site .sondage-page-title {
        font-size: 24px;
    }
    .sondage-site .sondage-assoc-row,
    .sondage-site .sondage-notation-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .sondage-site .sondage-btn-submit {
        width: 100%;
    }
}