/* =====================================================
   AIPR Facile — custom-quiz.css
   Styles spécifiques aux pages de quiz
   ===================================================== */

:root {
    --aipr-blue:   #1d4ed8;
    --font-body:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* ── Quiz header ────────────────────────────────────── */
.quiz-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ── Progress bar ───────────────────────────────────── */
.progress-bar-gradient {
    background: linear-gradient(90deg, #2563eb, #16a34a);
    transition: width 0.4s ease;
}

/* ── Liste des options ──────────────────────────────── */
.list-group-item {
    cursor: pointer;
    border-radius: 8px !important;
    margin-bottom: 6px;
    border: 1.5px solid #e5e7eb;
    padding: 0.85rem 1rem;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
    user-select: none;
}
.list-group-item:not(.list-group-item-success):not(.list-group-item-danger):hover {
    background-color: #eff6ff;
    border-color: #93c5fd;
    transform: translateX(2px);
}
.list-group-item input[type="checkbox"] {
    pointer-events: none;
    flex-shrink: 0;
}

/* ── Correction : bonne / mauvaise réponse ──────────── */
.list-group-item-success {
    background-color: #f0fdf4 !important;
    border-color: #16a34a !important;
}
.list-group-item-danger {
    background-color: #fef2f2 !important;
    border-color: #dc2626 !important;
}

/* ── Score circle (page résultats) ─────────────────── */
.score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1.1;
}
.score-circle .score-main {
    font-size: 1.9rem;
}
.score-circle .score-pct {
    font-size: 1rem;
    opacity: 0.85;
}

/* ── Timer ──────────────────────────────────────────── */
#timer {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    min-width: 5ch;
    text-align: center;
    transition: color 0.3s;
}
.timer-critical {
    animation: pulse-red 0.6s ease-in-out infinite alternate;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}
@keyframes pulse-red {
    from { opacity: 1;   transform: scale(1);    }
    to   { opacity: 0.8; transform: scale(1.05); }
}

/* ── Boutons quiz ────────────────────────────────────── */
.btn {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: 8px;
}
.btn-primary {
    background-color: var(--aipr-blue);
    border-color: var(--aipr-blue);
}
.btn-primary:hover {
    background-color: #1e3a8a;
    border-color: #1e3a8a;
}

/* ── Quiz footer ─────────────────────────────────────── */
.quiz-footer {
    font-size: 0.8rem;
}

/* ── Alerte explication ─────────────────────────────── */
.alert {
    border-radius: 10px;
    font-size: 0.9rem;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 576px) {
    .card-body { padding: 1.25rem !important; }
    .score-circle { width: 110px; height: 110px; }
    .score-circle .score-main { font-size: 1.5rem; }
}