/* Page publique d'un Quizz (cf. Components/Quizz/Default.cshtml, Scripts/Quizz.js).
   Les fonds vert/rouge pâles gardent une couleur de texte fixe foncée pour rester lisibles
   en thème sombre. */

.QuizzTitle {
    display: flex;
    align-items: center;
    gap: 4px;
}

.QuizzTitle .QuizzIco,
.QuizzTitle .QuizzIcoWon {
    width: 0.8em;
    height: 0.8em;
}

.QuizzRevealOption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    cursor: pointer;
}

.QuizzIntro,
.QuizzConclusion {
    margin: 16px 0;
}

.QuizzForm {
    margin: 20px 0;
}

.QuizzQuestion {
    border: 1px solid var(--status-text);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 18px;
}

.QuizzQuestionOk { border-color: #2e7d32; }
.QuizzQuestionKo { border-color: #c62828; }
.QuizzQuestionPartial { border-color: #e65100; }

.QuizzQuestionNumber {
    font-weight: 700;
    color: var(--title-color);
    padding: 0 6px;
}

.QuizzQuestionText .QuizzPara,
.QuizzAnswerText .QuizzPara {
    display: block;
    margin: 0 0 4px;
}

.QuizzQuestionText { font-weight: 600; }

.QuizzHint {
    font-style: italic;
    opacity: .8;
    margin: 6px 0 8px;
}

.QuizzAnswers {
    list-style: none;
    padding: 0;
    margin: 0;
}

.QuizzAnswer {
    border-radius: 8px;
    padding: 6px 10px;
    margin: 4px 0;
    transition: background-color .2s;
}

.QuizzAnswer label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.QuizzAnswer input { margin-top: 4px; flex-shrink: 0; }

.QuizzLocked .QuizzAnswer label { cursor: default; }

.QuizzAnswerOk { background-color: #d4edda; color: #132420; }
.QuizzAnswerKo { background-color: #f8d7da; color: #132420; }
/* Mode Pourcentage : réponse partiellement juste (1 à 99 % d'exactitude). */
.QuizzAnswerPartial { background-color: #ffe0b2; color: #132420; }
.QuizzAnswerReveal { background-color: #d4edda; color: #132420; box-shadow: inset 0 0 0 2px #2e7d32; }

.QuizzExplanation {
    margin: 6px 0 2px 28px;
    padding-left: 10px;
    border-left: 3px solid #c62828;
    font-size: .95em;
}

.QuizzExplanation p { margin: 0 0 4px; }

.QuizzQuestionFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    min-height: 1.4em;
}

.QuizzQuestionStatus { font-weight: 700; font-size: 1.2em; }
.QuizzQuestionOk .QuizzQuestionStatus { color: #2e7d32; }
.QuizzQuestionKo .QuizzQuestionStatus { color: #c62828; }
.QuizzQuestionPartial .QuizzQuestionStatus { color: #e65100; }

.QuizzRevealBtn {
    background: none;
    border: 1px solid var(--title-color);
    color: var(--title-color);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}

.QuizzActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.QuizzRestartBtn {
    margin-top: 10px;
    padding: 10px 24px;
    background: none;
    border: 2px solid var(--title-color);
    color: var(--title-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.QuizzResult {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 10px;
    color: #132420;
}

.QuizzResult p { margin: 0 0 6px; }
.QuizzResult p:first-child { font-weight: 700; font-size: 1.1em; }
.QuizzResultPassed { background-color: #d4edda; }
.QuizzResultFailed { background-color: #f8d7da; }
.QuizzInvitation a { color: #1667d6; font-weight: 600; }
.QuizzConfettiReplay { color: #1667d6; font-weight: 600; cursor: pointer; }

/* Trophée du bandeau de résultat d'un Quizz réussi : fichier /Imgs/trophy-fill.svg en masque,
   couleur portée par background-color (noir en mode clair, blanc en mode sombre). */
.QuizzResultTrophy {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 8px;
    vertical-align: -0.15em;
    background-color: #000000;
    -webkit-mask: url(/Imgs/trophy-fill.svg) no-repeat center / contain;
    mask: url(/Imgs/trophy-fill.svg) no-repeat center / contain;
}
[data-theme="dark"] .QuizzResultTrophy { background-color: #ffffff; }

/* Encart de shadowing d'un Quizz : fond et texte du thème, comme .ShadowingPostOverlay. */
.QuizzShadowingBox {
    background: var(--theme-bg-color);
    color: var(--text-color);
    border: 1px solid var(--status-text);
    border-radius: 10px;
    text-align: center;
    padding: 25px 20px 20px;
    margin: 20px 0;
}

.QuizzShadowingBox p { margin: 0 0 14px; font-size: 1.05rem; }
.QuizzShadowingBox .InscriptionSubmitBtn { display: inline-block; text-decoration: none; }