/* Quiz Container */
.quiz-container {
    width: 100%;
    height:  var(--app-height, 100dvh);
    position: relative;
    overflow: hidden;
    background: var(--dark-bg);
}

/* Progress Indicator */
.progress-indicator {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    z-index: 100;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--dark-surface);
    background: rgba(26, 22, 20, 0.85);
    backdrop-filter: blur(10px);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 50px;
    border: 1px solid rgba(250, 247, 244, 0.2);
    animation: fadeInDown 0.5s ease-out;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.progress-indicator.visible {
    opacity: 1;
    visibility: visible;
}

.progress-indicator span {
    font-weight: 700;
}

/* ============================================================
   Barre d'avancement non linéaire (option « Afficher le nombre de
   questions restantes » décochée) — pilotée par progress-bar.js
   ============================================================ */
.qf-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
}

.qf-progress.is-visible {
    opacity: 1;
    visibility: visible;
}

.qf-progress.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Piste neutre : lisible sur le volet vidéo (sombre) comme sur le volet réponses (clair) */
.qf-progress__track {
    position: absolute;
    inset: 0;
    background: rgba(120, 100, 90, 0.22);
}

.qf-progress__fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--primary-dark, #b8865a) 0%, var(--primary-color) 100%);
    /* Ombre portée sombre : reste lisible sur une vidéo au fond clair */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 10px var(--primary-color-alpha-50, rgba(212, 165, 116, 0.5));
    /* Sortie « expo » : part vite, se pose en douceur — l'avancée se lit d'un coup d'œil */
    transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, filter 0.4s ease;
    will-change: width;
}

/* Bord avant : capuchon foncé + halo coloré, point d'accroche visuel sur tout fond */
.qf-progress__tip {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 12px;
    border-radius: 999px;
    background: var(--primary-dark, #b8865a);
    box-shadow: 0 0 10px 2px var(--primary-color);
    animation: qfProgressBreathe 2.6s ease-in-out infinite;
}

/* Impulsion à chaque avancée : récompense l'action sans texte */
.qf-progress.is-advancing .qf-progress__fill {
    box-shadow: 0 0 22px var(--primary-color), 0 0 4px rgba(255, 255, 255, 0.9);
    filter: brightness(1.25);
}

/* Dernier quart : la barre gagne en éclat — « on y est presque » */
.qf-progress.is-late .qf-progress__fill {
    box-shadow: 0 0 14px var(--primary-color);
}

.qf-progress.is-late .qf-progress__tip {
    animation-duration: 1.4s;
}

/* Arrivée : flash puis extinction douce */
.qf-progress.is-complete .qf-progress__fill {
    border-radius: 0;
    box-shadow: 0 0 26px var(--primary-color), 0 0 6px rgba(255, 255, 255, 1);
    filter: brightness(1.35);
}

.qf-progress.is-complete .qf-progress__tip {
    animation: none;
    opacity: 0;
}

@keyframes qfProgressBreathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .qf-progress__fill {
        transition: width 0.3s ease-out;
    }
    .qf-progress__tip {
        animation: none;
    }
}

/* Questions Wrapper */
.questions-wrapper {
    position: relative;
    width: 100%;
    height:  var(--app-height, 100dvh);
}

/* Question Slide */
.question-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:  var(--app-height, 100dvh);
    display: flex;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                opacity 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

.question-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.question-slide.slide-out {
    opacity: 0;
    transform: translateY(-100%);
}

/* Desktop Layout */
@media (min-width: 769px) {
    .video-section {
        width: 50%;
        height:  var(--app-height, 100dvh);
        position: relative;
        overflow: hidden;
    }
    
    .answers-section {
        width: 50%;
        height:  var(--app-height, 100dvh);
        background: var(--dark-surface);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-2xl);
        position: relative;
    }
}

/* Video Section */
.question-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Poster image overlay - covers video until it plays */
.video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Hide poster when video is playing */
.video-poster.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(26, 22, 20, 0.3) 0%, rgba(26, 22, 20, 0) 50%, rgba(26, 22, 20, 0.3) 100%);
    pointer-events: none;
}

/* Video Play Overlay */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
    
}

.video-play-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.video-play-btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    overflow:visible !important;
}

/* Premier cercle de pulsation */
.video-play-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%) scale(1);
    animation: pulse-ring 3s ease-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* Deuxième cercle de pulsation avec délai */
.video-play-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);
    transform: translate(-50%, -50%) scale(1);
    animation: pulse-ring 3s ease-out infinite;
    animation-delay: 1.5s;
    z-index: -2;
    pointer-events: none;
}

/* Animation de pulsation */
@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Effet au survol */
.video-play-btn:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}

/* Animation accélérée au survol */
.video-play-btn:hover::before,
.video-play-btn:hover::after {
    animation-duration: 2s;
}

/* Effet au clic */
.video-play-btn:active {
    transform: scale(0.95);
}

/* Style pour l'icône SVG */
.video-play-btn svg {
    width: 45px;
    height: 45px;
    margin-left: 4px; /* Slight offset for visual centering */
    fill: currentColor;
}

/* Video Controls */
.video-controls {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    z-index: 10;
    background: rgba(26, 22, 20, 0.85);
    backdrop-filter: blur(10px);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 50px;
    border: 1px solid rgba(250, 247, 244, 0.2);
    animation: fadeInDown 0.5s ease-out;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.video-controls.visible {
    opacity: 1;
    visibility: visible;
}

.video-controls.hidden {
    opacity: 0;
    visibility: hidden;
}

.video-time {
    font-size: var(--font-size-sm);
    color: var(--dark-surface);
    font-weight: 500;
    padding: 0 var(--spacing-xs);
}

.control-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(250, 247, 244, 0.3);
    color: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: var(--primary-color-alpha-10);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.control-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--dark-surface);
}

/* Subtitles Container */
.subtitles-container {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.subtitles-container.active {
    opacity: 1;
}

.subtitle-text {
    display: inline-block;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 4px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(5px);
}

/* Start Prompt */
.start-prompt {
    display: none;
    width: 50%;
    height:  var(--app-height, 100dvh);
    background: var(--dark-surface);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.start-prompt.active {
    display: flex;
}

.start-prompt-content {
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.start-prompt-content h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Hide answers section initially for first question */
.answers-section.hidden {
    display: none;
}

/* Answers Content */
.answers-content {
    width: 100%;
    max-width: 500px;
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

.question-text {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    text-shadow: 0 2px 4px rgba(58, 40, 34, 0.1);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* Questions vraiment longues : réduction de la taille du texte (desktop) */
.question-text.question-text--long {
    font-size: 2rem;
}

.question-text::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
    opacity: 0.7;
}

/* Answers Grid */
.answers-grid {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Text Input Styles */
.text-input-wrapper {
    width: 100%;
    margin-top: var(--spacing-xl);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.text-input-wrapper .text-input {
    flex: 1;
}

/* Réassurance et messages d'erreur : chacun sur sa propre ligne, sous le champ.
   Sans cela ils se rangent dans la ligne flex, à côté du champ qu'ils écrasent. */
.text-input-wrapper > .email-reassurance-msg,
.text-input-wrapper > .email-error-msg,
.text-input-wrapper > .email-in-text-error-msg,
.text-input-wrapper > .numeric-error-msg {
    width: 100%;
    margin-top: 0;
}

.text-input {
    width: 100%;
    background: #FFF !important;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: all 0.3s ease;
    outline: none;
}

.text-input:focus {
    border-color: var(--primary-color);
    background: var(--primary-color-alpha-05);
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb, 234, 179, 8), 0.3);
    outline: none;
}

.text-input.multiline {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
}

.text-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Date Input Styles (date de naissance JJ / Mois / AAAA) */
.date-input-wrapper {
    width: 100%;
    margin-top: var(--spacing-xl);
    position: relative;
}

.date-fields {
    display: flex;
    gap: var(--spacing-sm);
}

.date-field {
    flex: 1 1 0;
    min-width: 0;
    /* !important : iOS garde le select en :focus après ouverture du picker —
       le fond doit rester blanc opaque dans tous les états (vidéo derrière). */
    background-color: #FFF !important;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-right: calc(var(--spacing-lg) + 16px);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: all 0.3s ease;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b7265' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    background-size: 16px;
}

.date-field.date-day { flex: 0 0 23%; }
.date-field.date-year { flex: 0 0 30%; }

.date-field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb, 234, 179, 8), 0.3);
}

.date-field.is-placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.date-error-msg {
    color: #ff4444;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    animation: fadeIn 0.3s ease;
}

.date-error-msg[hidden] {
    display: none;
}

/* Mobile : le bouton "suivant" est fixé en bas du viewport (56px + marge) —
   on réserve cette hauteur pour que les sélecteurs restent au-dessus du bouton. */
@media (max-width: 768px) {
    .date-input-wrapper {
        padding-bottom: calc(56px + var(--spacing-lg) + var(--spacing-xs));
    }
}

/* Email-SMS Input Styles */
.email-sms-wrapper {
    width: 100%;
    margin-top: var(--spacing-xl);
}

.email-sms-field {
    width: 100%;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.email-input,
.phone-input {
    width: 100%;
    background: #FFF !important;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: all 0.3s ease;
    outline: none;
}

.email-input:focus,
.phone-input:focus {
    border-color: var(--primary-color);
    background: var(--primary-color-alpha-05);
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb, 234, 179, 8), 0.3);
    outline: none;
}

.email-input.invalid,
.phone-input.invalid {
    border-color: #ff4444 !important;
    background: rgba(255, 68, 68, 0.05);
}

/* Questions text / numeric / email : le champ passe en rouge quand la saisie est
   refusée (adresse email invalide en type `email`, email détecté dans un champ
   `text`). Même traitement que les champs de la collecte email-sms ci-dessus. */
.text-input.invalid {
    border-color: #ff4444 !important;
    background: rgba(255, 68, 68, 0.05);
}

.email-error-msg,
.email-in-text-error-msg,
.numeric-error-msg {
    color: #ff4444;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    animation: fadeIn 0.3s ease;
}

.email-input::placeholder,
.phone-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.phone-input-group {
    display: flex;
    gap: var(--spacing-sm);
}

.country-code-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFF !important;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
    transition: all 0.3s ease;
    min-width: 100px;
}

.country-code-wrapper:focus-within {
    border-color: var(--primary-color);
    background: var(--primary-color-alpha-05);
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb, 234, 179, 8), 0.3);
}

.plus-prefix {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    margin-right: 2px;
}

.country-code-input {
    background: transparent !important;
    border: none;
    outline: none;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    width: 45px;
    padding: 0;
}

.phone-input {
    flex: 1;
}

/* Answer Button Base */
.answer-btn {
    background: var(--dark-surface-light);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-align: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Single Choice Grid */
.answers-grid.single-choice {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Single choice on desktop: vertical layout like multiple choice */
@media (min-width: 769px) {
    .answers-grid.single-choice {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .answers-grid.single-choice .answer-icon {
        display: none;
    }
}

/* Multiple Choice */
.answers-grid.multiple-choice {
    display: grid;
    gap: 0.5rem;
}

.answer-btn.multi-select {
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.answer-btn.multi-select .check-mark {
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--text-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
    order: 2; /* Place check-mark at the end */
}

.answer-btn.multi-select.selected .check-mark {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.answer-btn.multi-select .answer-text {
    flex: 1;
    order: 1; /* Place text at the beginning */
}

/* Limite de sélection (maxSelections) : consigne + compteur live */
.multi-limit-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding: 0.6rem 1rem;
    border-radius: 12px;
    background: var(--primary-color-alpha-05);
    border: 1px solid var(--primary-color-alpha-20);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.multi-limit-hint strong {
    font-weight: 700;
    color: var(--text-primary);
}

.multi-limit-count {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Quota atteint : la consigne devient un état, pas une simple indication */
.multi-limit-hint.is-full {
    background: var(--primary-color-alpha-10);
    border-color: var(--primary-color-alpha-40);
    color: var(--text-primary);
}

/* Refus d'une sélection supplémentaire */
.multi-limit-hint.shake {
    animation: multiLimitShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes multiLimitShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

/* Réponses neutralisées tant que la limite est atteinte */
.answer-btn.limit-locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.answer-btn.limit-locked:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.answer-btn.limit-locked:hover::before {
    width: 0;
}

.answer-icon {
    font-size: var(--font-size-2xl);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.answer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--gradient-btn-hover);
    transition: width 0.3s ease-out;
    z-index: -1;
}

.answer-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.answer-btn:hover::before {
    width: 100%;
}

.answer-btn.selected {
    border-color: var(--primary-color);
    background: var(--primary-color-alpha-10);
}

.answer-btn.selected::before {
    width: 100%;
}

.answer-text {
    flex: 1;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Slider Styles */
.slider-wrapper {
    width: 100%;
    margin-top: var(--spacing-xl);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: -0.01em;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.slider-labels .label-left,
.slider-labels .label-right {
    max-width: 40%;
}

.slider-labels .label-left {
    text-align: left;
}

.slider-labels .label-right {
    text-align: right;
}

.slider-container {
    position: relative;
    padding: var(--spacing-lg) 0;
    cursor: pointer;
    touch-action: manipulation; /* Allow native slider touch behavior */
    z-index: 1;
}

.slider-container.dragging {
    cursor: grabbing;
}

.slider-container.dragging .slider-thumb {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.slider-container.dragging .slider-value {
    opacity: 1;
}

.slider-input {
    position: absolute;
    width: 100%;
    height: 40px; /* Larger touch area */
    opacity: 0;
    cursor: pointer;
    z-index: 10; /* Higher z-index to ensure it's on top */
    top: 50%;
    transform: translateY(-50%);
}

.slider-track {
    width: 100%;
    height: 8px;
    background: var(--dark-surface-light);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    pointer-events: none; /* Don't block touch events */
}

.slider-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    width: 50%;
    transition: width 0.3s ease;
    pointer-events: none; /* Don't block touch events */
}

.slider-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: none; /* Don't block touch events */
}

.slider-thumb:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.slider-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-surface);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider-input:active ~ .slider-thumb .slider-value,
.slider-thumb:hover .slider-value,
.slider-container.dragging .slider-value {
    opacity: 1;
}

/* Dual Choice Styles */
.dual-choice {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.dual-btn {
    flex: 1;
    background: var(--dark-surface-light);
    border: 2px solid transparent;
    border-radius: 20px;
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.dual-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--gradient-btn-hover);
    transition: width 0.3s ease-out;
    z-index: -1;
}

.dual-btn:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.dual-btn:hover::before {
    width: 100%;
}

.dual-btn.selected {
    border-color: var(--primary-color);
    background: var(--primary-color-alpha-10);
}

.dual-btn.selected::before {
    width: 100%;
}

.dual-icon {
    font-size: var(--font-size-4xl);
    line-height: 1;
}

.dual-icon:empty {
    display: none;
}

.dual-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
}

.dual-separator {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
}

/* Next Button */
.next-btn {
    position: absolute;
    bottom: var(--spacing-2xl);
    right: var(--spacing-2xl);
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-xl);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.next-btn:not(:disabled):hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-2xl), var(--shadow-glow);
}

.next-btn:disabled {
    background: var(--dark-surface);
    opacity: 0;
}

.next-btn svg {
    width: 32px;
    height: 32px;
    transform: translateX(2px);
}

.next-btn:not(:disabled).pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Results Screen */
.results-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:  var(--app-height, 100dvh);
    background: linear-gradient(180deg, rgba(250, 247, 244, 1) 0%, rgba(245, 237, 230, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

.results-screen.active {
    opacity: 1;
    pointer-events: all;
}

.results-content {
    text-align: center;
    max-width: 600px;
    padding: var(--spacing-2xl);
    animation: scaleIn 0.5s ease-out;
}

.results-content h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.results-message {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

/* Alerte "vérifiez vos spams" (activable dans la config du quiz) */
.spam-alert-msg {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    max-width: 480px;
    margin: 0 auto var(--spacing-xl);
    padding: 16px 20px;
    background: #FFF1F1;
    border: 2px solid #E11D48;
    border-left-width: 6px;
    border-radius: 14px;
    box-shadow: 0 6px 20px -6px rgba(225, 29, 72, 0.45);
    animation: spamAlertPulse 1.8s ease-in-out infinite;
}

.spam-alert-icon {
    flex-shrink: 0;
    color: #E11D48;
}

.spam-alert-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.spam-alert-text strong {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #B91C1C;
    line-height: 1.3;
}

.spam-alert-text span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #C13030;
    line-height: 1.5;
}

@keyframes spamAlertPulse {
    0%, 100% { box-shadow: 0 6px 20px -6px rgba(225, 29, 72, 0.35); }
    50% { box-shadow: 0 6px 26px -4px rgba(225, 29, 72, 0.65); }
}

@media (max-width: 768px) {
    .spam-alert-msg {
        gap: 12px;
        padding: 14px 16px;
    }
}

.restart-btn {
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    font-size: var(--font-size-lg);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease-out;
}

.restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .progress-indicator {
        top: var(--spacing-md);
        left: var(--spacing-md);
        font-size: var(--font-size-lg);
    }

    .qf-progress {
        height: 6px;
    }

    /* Voile dégradé sous la barre (la vidéo est plein écran en haut sur mobile) */
    .qf-progress::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 36px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }
    
    .video-controls {
        top: var(--spacing-md);
        right: var(--spacing-md);
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }
    
    .video-time {
        font-size: var(--font-size-xs);
    }
    
    .control-btn {
        width: 32px;
        height: 32px;
    }
    
    .control-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .subtitles-container {
        bottom: 20%;
        width: 95%;
    }
    
    .subtitle-text {
        font-size: 16px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .question-slide {
        flex-direction: column;
    }
    
    .video-section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .answers-section {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(250, 247, 244, 0.98) 0%, rgba(250, 247, 244, 0.9) 80%, transparent 100%);
        backdrop-filter: blur(20px);
        padding: var(--spacing-lg);
        padding-bottom: var(--spacing-2xl);
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: calc(var(--app-height, 100vh) * 0.5);
        max-height: calc(var(--app-height, 100vh) * 0.8);
        overflow-y: auto;
    }
    
    /* Start Prompt Mobile */
    .start-prompt {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.5) 80%, transparent 100%);
        backdrop-filter: none;
        padding: 1rem;
        z-index: 10;
        min-height: calc(var(--app-height, 100vh) * 0.25);
        max-height: calc(var(--app-height, 100vh) * 0.4);
        justify-content: center;
        align-items: flex-end;
    }
    
    .start-prompt-content {
        margin-bottom: 2rem;
        text-align: center;
        width: 100%;
    }
    
    .start-prompt-content h2 {
        color: white;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
        font-weight: 700;
        font-size: 1.8rem;
        margin: 0;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        backdrop-filter: blur(10px);
    }
    
    .answers-content {
        animation: slideInUp 0.6s ease-out;
    }
    
    @keyframes slideInUp {
        from {
            transform: translateY(50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .question-text {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-lg);
    }
    
    /* Mobile Grid Adjustments */
    .answers-grid.single-choice {
        grid-template-columns: 1fr;
    }
    
    .answers-grid {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }
    
    .answer-btn {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .answer-icon {
        font-size: var(--font-size-xl);
    }
    
    .answer-text {
        font-size: var(--font-size-sm);
    }
    
    /* Mobile Text Input */
    .text-input {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .text-input.multiline {
        min-height: 100px;
    }

    /* Mobile text button alignment */
    .mobile-text-btn {
        position: absolute;
        right: var(--spacing-xs);
        bottom: 6px;
        top: auto;
    }
    
    /* Mobile Dual Choice */
    .dual-choice {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .dual-btn {
        width: 100%;
        flex-direction: row;
        padding: var(--spacing-md);
    }
    
    .dual-icon {
        font-size: var(--font-size-2xl);
    }

    .dual-separator {
        display: none;
    }
    
    /* Mobile Slider */
    .slider-labels {
        font-size: var(--font-size-xs);
    }
    
    /* Mobile Next Button */
    .next-btn {
        width: 60px;
        height: 60px;
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
    }
    
    .next-btn svg {
        width: 24px;
        height: 24px;
    }
    
    /* Mobile Results */
    .results-content h1 {
        font-size: var(--font-size-3xl);
    }
    
    .results-content {
        padding: var(--spacing-lg);
    }
}

/* Mobile Button Styles */
.mobile-text-btn {
    position: static;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.mobile-text-btn:not(:disabled):hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.mobile-text-btn:disabled {
    background: var(--dark-surface-light);
    opacity: 0.5;
}

.mobile-text-btn svg {
    width: 20px;
    height: 20px;
    transform: translateX(1px);
}

.mobile-text-btn:not(:disabled).pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mobile-fullwidth-btn {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--spacing-xl) * 2);
    max-width: 400px;
    height: 56px;
    background: var(--primary-color);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-xl);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    z-index: 20;
}

.mobile-fullwidth-btn:not(:disabled):hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: var(--shadow-2xl);
}

.mobile-fullwidth-btn:disabled {
    background: var(--dark-surface-light);
    opacity: 0.5;
}

.mobile-fullwidth-btn svg {
    width: 24px;
    height: 24px;
    transform: translateX(2px);
}

.mobile-fullwidth-btn:not(:disabled).pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .8;
        transform: scale(0.95);
    }
}

/* Subtitles Styles */
.subtitles-container {
    position: absolute;
    bottom: 80px; /* Au-dessus des contrôles vidéo */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.subtitles-container.active {
    opacity: 1;
}

.subtitle-text {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease;
    word-wrap: break-word;
    hyphens: auto;
}

.subtitle-text:empty {
    display: none;
}

/* Subtitles toggle button active state */
.subtitles-toggle.active {
    background: var(--primary-color);
    color: white;
}

.subtitles-toggle.active svg {
    color: white;
}

/* Mobile adjustments for subtitles */
@media (max-width: 768px) {
    .subtitles-container {
        bottom: 60px;
        width: 95%;
    }

    .subtitle-text {
        font-size: 14px;
        padding: 10px 16px;
    }
}

/* ============================================
   PICTURE ANSWERS STYLES
   ============================================ */

/* Picture Grid - flexbox pour centrage optimal */
.answers-grid.picture-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 90%;
    margin: 0 auto;
}

/* Picture Button */
.answer-btn.picture-btn {
    flex: 0 1 calc(50% - var(--spacing-md) / 2);
    max-width: calc(50% - var(--spacing-md) / 2);
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    border: 3px solid transparent;
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answer-btn.picture-btn::before {
    display: none;
}

.answer-btn.picture-btn:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.answer-btn.picture-btn.selected {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-selected);
}

/* Answer Picture Image - préserve le ratio avec object-fit: contain */
.answer-picture {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 13px;
    transition: transform 0.3s ease;
}

/* 1 ligne (1-2 photos) : max-height 33vh */
.answers-grid.picture-grid[data-count="1"] .answer-picture,
.answers-grid.picture-grid[data-count="2"] .answer-picture {
    max-height: calc(var(--app-height, 100vh) * 0.33);
}

/* 2 lignes (3+ photos) : max-height 23vh par image */
.answers-grid.picture-grid[data-count="3"] .answer-picture,
.answers-grid.picture-grid[data-count="4"] .answer-picture,
.answers-grid.picture-grid[data-count="5"] .answer-picture,
.answers-grid.picture-grid[data-count="6"] .answer-picture {
    max-height: calc(var(--app-height, 100vh) * 0.23);
}

.answer-btn.picture-btn:hover .answer-picture {
    transform: scale(1.02);
}

/* Check mark pour les photos en multiple choice */
.check-mark.picture-check {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.answer-btn.multi-select.picture-btn.selected .check-mark.picture-check {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Single choice picture - pas de checkbox */
.answers-grid.single-choice.picture-grid .answer-btn.picture-btn .check-mark {
    display: none;
}

/* Effet de sélection pour single choice avec photos */
.answers-grid.single-choice.picture-grid .answer-btn.picture-btn.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    animation: scaleIn 0.3s ease-out;
    box-shadow: var(--shadow-glow-strong);
}

/* Mobile adjustments for picture grid */
@media (max-width: 768px) {
    .answers-grid.picture-grid {
        gap: var(--spacing-sm);
        max-width: 95%;
    }

    .answer-btn.picture-btn {
        flex: 0 1 calc(50% - var(--spacing-sm) / 2);
        max-width: calc(50% - var(--spacing-sm) / 2);
        border-radius: 12px;
        border-width: 2px;
    }

    .answer-picture {
        border-radius: 10px;
    }

    /* Mobile : contraintes de hauteur adaptées */
    /* 1 ligne (1-2 photos) : max-height 30vh sur mobile */
    .answers-grid.picture-grid[data-count="1"] .answer-picture,
    .answers-grid.picture-grid[data-count="2"] .answer-picture {
        max-height: calc(var(--app-height, 100vh) * 0.3);
    }

    /* 2 lignes (3+ photos) : max-height 20vh par image sur mobile */
    .answers-grid.picture-grid[data-count="3"] .answer-picture,
    .answers-grid.picture-grid[data-count="4"] .answer-picture,
    .answers-grid.picture-grid[data-count="5"] .answer-picture,
    .answers-grid.picture-grid[data-count="6"] .answer-picture {
        max-height: calc(var(--app-height, 100vh) * 0.2);
    }

    .check-mark.picture-check {
        width: 24px;
        height: 24px;
        font-size: 12px;
        top: var(--spacing-xs);
        right: var(--spacing-xs);
    }

    .answers-grid.single-choice.picture-grid .answer-btn.picture-btn.selected::after {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
}

/* ── Photo Upload (question de type photo_upload) ───────────────────────────── */
.photo-upload-wrapper {
    width: 100%;
    margin-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.photo-upload-dropzone {
    width: 100%;
    min-height: 200px;
    background: #FFF;
    border: 2px dashed var(--primary-color);
    border-radius: 16px;
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--primary-color);
}

/* Survol réservé aux appareils à pointeur : sur tactile, le :hover « collant »
   déclenché par l'appui remplaçait le fond blanc par un alpha quasi transparent. */
@media (hover: hover) {
    .photo-upload-dropzone:hover {
        background: var(--primary-color-alpha-05);
        box-shadow: 0 0 8px rgba(var(--primary-color-rgb, 234, 179, 8), 0.3);
    }
}

/* Retour d'appui tactile : un halo, sans toucher au fond */
.photo-upload-dropzone:active {
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb, 234, 179, 8), 0.4);
}

.photo-upload-dropzone.is-dragover {
    background: var(--primary-color-alpha-10);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 234, 179, 8), 0.25);
    transform: scale(1.01);
}

.photo-upload-dropzone.is-uploading {
    cursor: progress;
    opacity: 0.9;
}

/* Les 3 états (empty / preview / loader) ont un display:flex explicite qui, en tant que
   règle auteur, l'emporte sur le [hidden] du user-agent. Sans ce override, les états masqués
   via l'attribut hidden restent affichés et se superposent. */
.photo-upload-empty[hidden],
.photo-upload-preview[hidden],
.photo-upload-loader[hidden] {
    display: none;
}

.photo-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
}

.photo-upload-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.photo-upload-hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 400;
}

.photo-upload-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.photo-upload-img {
    max-width: 100%;
    max-height: 280px;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: var(--shadow-lg);
}

.photo-upload-change {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
}

.photo-upload-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.photo-upload-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--primary-color-alpha-10);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: photo-upload-spin 0.8s linear infinite;
}

@keyframes photo-upload-spin {
    to { transform: rotate(360deg); }
}

.photo-upload-error {
    width: 100%;
    background: rgba(255, 68, 68, 0.10);
    border: 1px solid #ff4444;
    border-radius: 10px;
    padding: var(--spacing-sm) var(--spacing-md);
    color: #ff4444;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: center;
}

/* Fond translucide propre : certains thèmes rendent la section réponses transparente
   sur la vidéo — la notice doit rester lisible quel que soit le fond derrière. */
.photo-upload-notice {
    width: 100%;
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
}

/* Fond opaque obligatoire : sur mobile la section réponses est translucide (gradient
   + blur), un fond alpha rendrait le badge invisible. */
.photo-upload-optional-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    background: #FFF;
    border: 1px solid var(--primary-color-alpha-40);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
}

/* Lien (et non bouton) volontairement : la dropzone doit rester la seule
   affordance en forme de boîte d'action, sinon le skip se fait passer pour le CTA.
   La pastille translucide garantit la lisibilité sur les thèmes vidéo-transparents. */
.photo-upload-skip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1.3rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--primary-color-alpha-50);
    cursor: pointer;
    transition: color 0.2s ease;
}

.photo-upload-skip[hidden] {
    display: none;
}

.photo-upload-skip:hover {
    color: var(--primary-dark);
    text-decoration-color: var(--primary-dark);
}

.photo-upload-skip svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.photo-upload-skip:hover svg {
    transform: translateX(3px);
}

/* ── Mobile ──────────────────────────────────────────────────────────────────
   La section réponses est ancrée en bas (flex-end, max 80vh) : tout pixel ajouté
   au module pousse la question hors de l'écran par le haut. On retire donc la
   notice de stockage et on compacte la dropzone pour que la question reste visible. */
@media (max-width: 768px) {
    .photo-upload-wrapper {
        margin-top: var(--spacing-sm);
        gap: var(--spacing-sm);
        /* Le bouton "suivant" mobile est fixé en bas du viewport (56px + 2rem de
           marge) : on réserve cette hauteur pour que rien ne passe dessous. */
        padding-bottom: calc(56px + var(--spacing-lg) + var(--spacing-xs));
    }

    /* Verre dépoli plutôt que blanc massif : laisse transparaître la vidéo
       tout en gardant le contenu de la dropzone lisible. */
    .photo-upload-dropzone {
        min-height: 110px;
        padding: var(--spacing-md);
        background: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .photo-upload-empty {
        gap: 0.4rem;
    }

    .photo-upload-empty svg {
        width: 26px;
        height: 26px;
    }

    .photo-upload-label {
        font-size: var(--font-size-base);
    }

    .photo-upload-hint {
        font-size: var(--font-size-xs);
    }

    .photo-upload-img {
        max-height: 160px;
    }

    .photo-upload-notice {
        display: none;
    }

    .photo-upload-skip {
        padding: 0.6rem 1.2rem;
        font-size: var(--font-size-sm);
    }

    .photo-upload-skip:active {
        opacity: 0.6;
    }
}

/* ── Sélecteur (question de type selector) ─────────────────────────────────────
   Une option parmi une longue liste, avec recherche. Desktop : recherche + liste
   intégrées au panneau réponses. Mobile : un champ ouvre une feuille plein écran
   (.selector-panel.is-sheet, déplacée sous <body> par main.js le temps du choix).
   Couleurs uniquement via les variables du thème. */
.selector-wrapper {
    width: 100%;
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Champ déclencheur : présentation mobile seulement */
.selector-trigger {
    display: none;
    width: 100%;
    min-height: 56px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    background: #FFF;
    border: 2px solid transparent;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.selector-wrapper[data-mode="sheet"] .selector-trigger {
    display: flex;
}

.selector-wrapper[data-mode="inline"] .selector-trigger {
    display: none;
}

.selector-trigger:active {
    transform: scale(0.99);
}

.selector-trigger:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-color-alpha-30);
}

.selector-trigger.has-value {
    border-color: var(--primary-color);
}

.selector-trigger-icon {
    flex-shrink: 0;
    color: var(--primary-color);
}

.selector-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector-trigger-label.is-placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.selector-trigger-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Panneau : recherche + liste (intégré au panneau réponses sur desktop) */
.selector-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #FFF;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: left;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.selector-sheet-header {
    display: none;
}

.selector-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.6rem 0 1rem;
    border-bottom: 1px solid var(--primary-color-alpha-20);
    transition: box-shadow 0.2s ease;
}

.selector-search:focus-within {
    box-shadow: inset 0 -2px 0 var(--primary-color);
}

.selector-search-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* ≥ 16px : iOS ne zoome pas sur le champ au focus */
.selector-search-input {
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-lg);
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}

.selector-search-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Le cadre global input:focus-visible (main.css) doublerait celui de la barre :
   le focus est déjà signalé par .selector-search:focus-within */
.selector-search-input:focus,
.selector-search-input:focus-visible {
    outline: none;
}

.selector-search-clear {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--dark-surface-light);
    color: var(--text-secondary);
    cursor: pointer;
}

.selector-search-clear[hidden] {
    display: none;
}

.selector-empty {
    margin: 0;
    padding: 0.9rem 1.1rem 0.2rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.selector-empty[hidden] {
    display: none;
}

.selector-empty strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--text-primary);
    font-weight: 600;
}

.selector-list {
    position: relative;
    margin: 0;
    padding: 0.35rem 0 0;
    list-style: none;
    /* Le panneau desktop ne défile pas : la liste reste bornée à la hauteur d'écran */
    max-height: clamp(160px, calc(var(--app-height, 100vh) * 0.38), 340px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.selector-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.7rem 1.1rem;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.selector-option-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Partie du libellé qui correspond à la recherche */
.selector-option-label mark {
    background: none;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary-color-alpha-50);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.selector-option-check {
    flex-shrink: 0;
    color: var(--primary-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}

@media (hover: hover) {
    .selector-option:hover {
        background: var(--primary-color-alpha-05);
    }
}

.selector-option:active {
    background: var(--primary-color-alpha-10);
}

/* Option surlignée au clavier (flèches ; la meilleure correspondance pendant la saisie) */
.selector-option.is-active {
    background: var(--primary-color-alpha-10);
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.selector-option.is-selected {
    color: var(--primary-dark);
    font-weight: 600;
}

.selector-option.is-selected .selector-option-check {
    opacity: 1;
}

/* « Autres » : dernier élément, collé au bas de la liste pendant le défilement.
   Fond opaque obligatoire : il recouvre les options qui défilent dessous. */
.selector-option--other {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: 0.35rem;
    background: #FFF;
    border-top: 1px solid var(--primary-color-alpha-20);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .selector-option--other:hover {
        background: linear-gradient(var(--primary-color-alpha-05), var(--primary-color-alpha-05)), #FFF;
    }
}

.selector-option--other:active,
.selector-option--other.is-active {
    background: linear-gradient(var(--primary-color-alpha-10), var(--primary-color-alpha-10)), #FFF;
}

/* Annonce du nombre de résultats (lecteurs d'écran uniquement) */
.selector-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Rappel du choix (desktop : la liste peut être filtrée ou défilée ailleurs) */
.selector-current {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--primary-color-alpha-10);
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.selector-current[hidden],
.selector-wrapper[data-mode="sheet"] .selector-current {
    display: none;
}

.selector-current svg {
    flex-shrink: 0;
    color: var(--primary-color);
}

.selector-current-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 700;
}

/* « Je ne sais pas » : un lien, pas un bouton (même traitement que le skip photo) —
   le choix dans la liste reste l'action principale. */
.selector-skip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1.3rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--primary-color-alpha-50);
    cursor: pointer;
    transition: color 0.2s ease;
}

.selector-skip[hidden] {
    display: none;
}

.selector-skip:hover {
    color: var(--primary-dark);
    text-decoration-color: var(--primary-dark);
}

.selector-skip svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.selector-skip:hover svg {
    transform: translateX(3px);
}

/* ── Feuille plein écran (présentation mobile) ──
   top/height réajustés par main.js sur window.visualViewport : la liste et
   « Autres » restent au-dessus du clavier virtuel. */
.selector-panel.is-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: var(--app-height, 100dvh);
    z-index: 10050;
    display: none;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.selector-panel.is-sheet.is-open {
    display: flex;
}

.selector-panel.is-sheet.is-visible {
    opacity: 1;
    transform: none;
}

.selector-panel.is-sheet .selector-sheet-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: max(0.8rem, env(safe-area-inset-top, 0px)) 0.75rem 0.6rem 1.1rem;
}

.selector-sheet-title {
    flex: 1;
    margin: 0;
    padding-top: 0.55rem;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.selector-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--dark-surface-light);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.selector-panel.is-sheet .selector-search {
    margin: 0 0.9rem 0.35rem;
    padding: 0 0.4rem 0 0.9rem;
    background: var(--dark-surface-light);
    border: 2px solid transparent;
    border-radius: 14px;
}

.selector-panel.is-sheet .selector-search:focus-within {
    background: #FFF;
    border-color: var(--primary-color);
    box-shadow: none;
}

.selector-panel.is-sheet .selector-search-input {
    height: 50px;
    font-size: 16px;
}

.selector-panel.is-sheet .selector-list {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.selector-panel.is-sheet .selector-option {
    min-height: 52px;
    padding: 0.8rem 1.25rem;
    font-size: 1.05rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.selector-panel.is-sheet .selector-option:first-child {
    border-top: none;
}

.selector-panel.is-sheet .selector-option--other {
    border-top: 1px solid var(--primary-color-alpha-20);
}

html.qf-selector-open,
html.qf-selector-open body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .selector-panel.is-sheet {
        transform: none;
        transition: none;
    }
}

@media (max-width: 768px) {
    .selector-wrapper {
        margin-top: var(--spacing-sm);
        gap: 0.75rem;
    }

    /* Avant l'initialisation JS, la présentation mobile est déjà la bonne */
    .selector-trigger {
        display: flex;
    }

    .selector-wrapper:not([data-mode="inline"]) > .selector-panel:not(.is-sheet) {
        display: none;
    }

    .selector-skip {
        padding: 0.6rem 1.2rem;
        font-size: var(--font-size-sm);
    }

    .selector-skip:active {
        opacity: 0.6;
    }
}