/**
 * Num'Education - Styles Quiz (élèves)
 */

/* Access Form */
.numedu-quiz-access { max-width: 400px; margin: 40px auto; }

/* Quiz Container */
.numedu-quiz-container { max-width: 700px; margin: 0 auto; padding: 20px; }
.numedu-quiz-card { text-align: center; }
.numedu-quiz-title { margin: 0 0 16px 0; font-size: 1.75rem; color: var(--numedu-text); }
.numedu-quiz-description { color: var(--numedu-text-light); margin-bottom: 24px; line-height: 1.6; }
.numedu-quiz-info { display: flex; justify-content: center; gap: 24px; margin-bottom: 32px; }
.numedu-info-item { font-size: 14px; color: var(--numedu-text-light); }

/* Student Form */
#numedu-student-form { text-align: left; max-width: 400px; margin: 0 auto; }

/* Quiz Header */
.numedu-quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.numedu-quiz-progress { font-size: 14px; color: var(--numedu-text-light); }
.numedu-quiz-timer { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--numedu-text); padding: 8px 16px; background: var(--numedu-bg); border-radius: var(--numedu-radius); }
.numedu-quiz-timer.warning { color: var(--numedu-warning); background: var(--numedu-warning-light); }
.numedu-quiz-timer.danger { color: var(--numedu-danger); background: var(--numedu-danger-light); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Progress Bar */
.numedu-progress-bar-container { height: 6px; background: var(--numedu-border); border-radius: 100px; margin-bottom: 24px; overflow: hidden; }
.numedu-progress-bar-fill { height: 100%; background: var(--numedu-primary); transition: width 0.3s ease; }

/* Question */
.numedu-question { background: var(--numedu-bg-white); border-radius: var(--numedu-radius-lg); box-shadow: var(--numedu-shadow); padding: 32px; }
.numedu-question-text { font-size: 1.125rem; font-weight: 500; margin-bottom: 24px; line-height: 1.6; }
.numedu-question-image { max-width: 100%; height: auto; border-radius: var(--numedu-radius); margin-bottom: 20px; }
.numedu-question-hint { font-size: 13px; color: var(--numedu-text-muted); font-style: italic; margin-top: 16px; padding: 12px; background: var(--numedu-bg); border-radius: var(--numedu-radius); }

/* Options */
.numedu-options { display: flex; flex-direction: column; gap: 12px; }
.numedu-option { display: flex; align-items: center; padding: 16px; border: 2px solid var(--numedu-border); border-radius: var(--numedu-radius); cursor: pointer; transition: all 0.2s ease; }
.numedu-option:hover { border-color: var(--numedu-primary-light); background: rgba(79, 70, 229, 0.05); }
.numedu-option.selected { border-color: var(--numedu-primary); background: rgba(79, 70, 229, 0.1); }
.numedu-option input { display: none; }
.numedu-option-marker { width: 24px; height: 24px; border: 2px solid var(--numedu-border); border-radius: 50%; margin-right: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; }
.numedu-option.selected .numedu-option-marker { border-color: var(--numedu-primary); background: var(--numedu-primary); }
.numedu-option.selected .numedu-option-marker::after { content: '✓'; color: white; font-size: 14px; }
.numedu-option[data-type="multiple"] .numedu-option-marker { border-radius: 4px; }
.numedu-option-text { flex: 1; font-size: 15px; }

/* True/False */
.numedu-truefalse { display: flex; gap: 16px; }
.numedu-truefalse .numedu-option { flex: 1; justify-content: center; }

/* Text Input */
.numedu-text-answer { width: 100%; }
.numedu-text-answer input { width: 100%; padding: 14px 16px; font-size: 16px; border: 2px solid var(--numedu-border); border-radius: var(--numedu-radius); }
.numedu-text-answer input:focus { outline: none; border-color: var(--numedu-primary); }

/* Navigation */
.numedu-quiz-navigation { display: flex; justify-content: space-between; margin-top: 24px; }

/* Results */
.numedu-results-card { text-align: center; }
.numedu-results-header h2 { margin: 0 0 32px 0; font-size: 1.5rem; }
.numedu-score-display { margin-bottom: 32px; }
.numedu-score-circle { width: 160px; height: 160px; border-radius: 50%; margin: 0 auto 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--numedu-primary), var(--numedu-primary-dark)); color: white; }
.numedu-score-circle .score-value { font-size: 48px; font-weight: 700; line-height: 1; }
.numedu-score-circle .score-label { font-size: 18px; opacity: 0.9; }
.numedu-score-details { display: flex; justify-content: center; gap: 48px; }
.numedu-score-item { text-align: center; }
.numedu-score-item .label { display: block; font-size: 13px; color: var(--numedu-text-muted); margin-bottom: 4px; }
.numedu-score-item .value { font-size: 24px; font-weight: 600; color: var(--numedu-text); }
.numedu-score-message { padding: 16px 24px; border-radius: var(--numedu-radius); margin-bottom: 24px; }
.numedu-score-message.excellent { background: var(--numedu-success-light); color: #166534; }
.numedu-score-message.good { background: #ecfccb; color: #3f6212; }
.numedu-score-message.average { background: var(--numedu-warning-light); color: #92400e; }
.numedu-score-message.poor { background: var(--numedu-danger-light); color: #991b1b; }

/* Correction */
.numedu-correction { margin-top: 32px; text-align: left; }
.numedu-correction h3 { margin-bottom: 20px; }
.numedu-correction-item { padding: 16px; border-radius: var(--numedu-radius); margin-bottom: 12px; }
.numedu-correction-item.correct { background: var(--numedu-success-light); border-left: 4px solid var(--numedu-success); }
.numedu-correction-item.incorrect { background: var(--numedu-danger-light); border-left: 4px solid var(--numedu-danger); }
.numedu-correction-question { font-weight: 500; margin-bottom: 8px; }
.numedu-correction-answers { font-size: 14px; color: var(--numedu-text-light); }
.numedu-correction-answers strong { color: var(--numedu-text); }

/* ========================================
   Image dans les questions (côté élève)
   ======================================== */
.question-image {
    margin: 20px 0;
    text-align: center;
}

.question-image img {
    max-width: 100%;
    max-height: 350px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

@media (max-width: 600px) {
    .question-image img {
        max-height: 250px;
    }
}