/* ── MC Quiz IA — Front-end styles ───────────────────────────────────────── */

.mcqz-wrap {
    --mcqz-accent:   #8B3A21;
    --mcqz-correct:  #8a9a5b;
    --mcqz-wrong:    #d63638;
    --mcqz-neutral:  #f4f1eb;
    --mcqz-border:   #e8e0d4;
    --mcqz-text:     #2d2520;
    --mcqz-muted:    #7a6f69;
    background: var(--mcqz-neutral);
    border: 1px solid var(--mcqz-border);
    border-radius: 12px;
    overflow: hidden;
    margin: 28px 0;
    font-family: inherit;
}

/* Header */
.mcqz-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mcqz-accent);
    color: #fff;
    padding: 14px 18px;
}
.mcqz-icon { font-size: 1.5rem; line-height: 1; }
.mcqz-titre { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.mcqz-subtitle { font-size: .75rem; opacity: .8; margin-top: 2px; }

/* Body */
.mcqz-body { padding: 18px; }

/* Barre de progression */
.mcqz-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.mcqz-progress-bar {
    flex: 1;
    background: #ddd;
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
}
.mcqz-progress-fill {
    height: 100%;
    background: var(--mcqz-accent);
    border-radius: 99px;
    transition: width .4s ease;
    width: 0%;
}
.mcqz-progress-lbl {
    font-size: .75rem;
    color: var(--mcqz-muted);
    white-space: nowrap;
}

/* Question */
.mcqz-question {
    animation: mcqz-fadein .3s ease;
}
@keyframes mcqz-fadein {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}
.mcqz-q-text {
    font-size: .97rem;
    font-weight: 600;
    color: var(--mcqz-text);
    margin-bottom: 14px;
    line-height: 1.4;
}
.mcqz-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mcqz-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid var(--mcqz-border);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    font-size: .88rem;
    color: var(--mcqz-text);
    text-align: left;
    width: 100%;
}
.mcqz-choice:hover:not(:disabled) {
    border-color: var(--mcqz-accent);
    background: #fdf8f5;
    transform: translateX(2px);
}
.mcqz-choice .mcqz-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mcqz-neutral);
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.mcqz-choice.correct {
    border-color: var(--mcqz-correct);
    background: #f0f5e8;
}
.mcqz-choice.correct .mcqz-letter {
    background: var(--mcqz-correct);
    color: #fff;
}
.mcqz-choice.wrong {
    border-color: var(--mcqz-wrong);
    background: #fdf0f0;
}
.mcqz-choice.wrong .mcqz-letter {
    background: var(--mcqz-wrong);
    color: #fff;
}
.mcqz-choice:disabled { cursor: default; }

/* Explication */
.mcqz-explication {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff;
    border-left: 3px solid var(--mcqz-accent);
    border-radius: 0 6px 6px 0;
    font-size: .82rem;
    color: var(--mcqz-muted);
    animation: mcqz-fadein .3s ease;
}

/* Bouton suivant */
.mcqz-btn-next {
    margin-top: 14px;
    background: var(--mcqz-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.mcqz-btn-next:hover { opacity: .88; }

/* Résultat final */
.mcqz-result {
    text-align: center;
    padding: 10px 0 4px;
    animation: mcqz-fadein .4s ease;
}
.mcqz-score-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--mcqz-accent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.mcqz-result-titre {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--mcqz-text);
}
.mcqz-result-msg {
    font-size: .85rem;
    color: var(--mcqz-muted);
    margin-bottom: 16px;
}

/* Vote */
.mcqz-vote-wrap {
    border-top: 1px solid var(--mcqz-border);
    padding-top: 14px;
    margin-top: 8px;
}
.mcqz-vote-label {
    font-size: .82rem;
    color: var(--mcqz-muted);
    margin-bottom: 8px;
}
.mcqz-vote-btns { display: flex; gap: 10px; justify-content: center; }
.mcqz-vote-btn {
    background: #fff;
    border: 1.5px solid var(--mcqz-border);
    border-radius: 8px;
    padding: 7px 18px;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.mcqz-vote-btn:hover { border-color: var(--mcqz-accent); background: #fdf8f5; }
.mcqz-vote-btn.voted-yes { border-color: var(--mcqz-correct); background: #f0f5e8; }
.mcqz-vote-btn.voted-no  { border-color: var(--mcqz-muted);  background: #f5f5f5; }
.mcqz-vote-thanks {
    font-size: .8rem;
    color: var(--mcqz-muted);
    margin-top: 8px;
}

/* Bouton rejouer */
.mcqz-btn-replay {
    margin-top: 12px;
    background: transparent;
    color: var(--mcqz-accent);
    border: 1.5px solid var(--mcqz-accent);
    border-radius: 8px;
    padding: 7px 18px;
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s;
}
.mcqz-btn-replay:hover { background: var(--mcqz-accent); color: #fff; }

/* Erreur */
.mcqz-error {
    padding: 12px 16px;
    background: #fff8f0;
    border: 1px solid #f0d0b0;
    border-radius: 8px;
    color: #a05020;
    font-size: .85rem;
}

/* Responsive */
@media (max-width: 480px) {
    .mcqz-body { padding: 14px; }
    .mcqz-choice { font-size: .82rem; padding: 9px 12px; }
}