/* =====================================================================
   JQUIZ — SC@LPA 2026 (Version modernisée + icônes)
   Compatible HotPotatoes JQuiz
   ===================================================================== */


/* ===============================================================
   STRUCTURE GÉNÉRALE
   =============================================================== */

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

.QuizQuestion {
    padding: 1rem 0;
    border-bottom: 1px solid #e3e6ea;
}


/* ===============================================================
   TEXTE DE QUESTION
   =============================================================== */

.QuestionText {
    margin-bottom: 1rem;
    font-size: 1rem;
}


/* ===============================================================
   LISTE DES RÉPONSES (QCM)
   =============================================================== */

.MCAnswers {
    list-style-type: upper-alpha;
    padding-left: 1.5rem;
}

.MCAnswers li {
    margin-bottom: 0.75rem;
}


/* ===============================================================
   BOUTONS FONCTIONNELS — SC@LPA MODERN
   =============================================================== */

.FuncButton {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    border: none;
    border-radius: 9px;
    padding: 0.35rem 1.1rem;
    margin-right: 0.5rem;

    font-size: 0.9rem;
    font-weight: 500;

    background: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
    color: #fff;

    box-shadow: 0 4px 10px rgba(0,0,0,.15);

    cursor: pointer;
    transition: all .15s ease-in-out;
}

.FuncButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    filter: brightness(1.05);
}

.FuncButton:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

.FuncButton:disabled {
    opacity: .6;
    cursor: not-allowed;
}


/* ===============================================================
   ICÔNES AUTOMATIQUES
   =============================================================== */

/* Navigation */
#PrevQButton::before {
    content: "\f12f";
    font-family: "bootstrap-icons";
}

#NextQButton::after {
    content: "\f138";
    font-family: "bootstrap-icons";
}

/* Bouton validation / vérifier */
button[onclick*="CheckAnswer"]::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
}

/* Hint */
button[onclick*="ShowHint"]::before {
    content: "\f46b";
    font-family: "bootstrap-icons";
}

/* Voir réponses */
button[onclick*="ShowAnswers"]::before {
    content: "\f06a";
    font-family: "bootstrap-icons";
}

/* OK feedback */
#FeedbackOKButton::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
}


/* ===============================================================
   COULEURS SPÉCIFIQUES
   =============================================================== */

#PrevQButton,
#NextQButton {
    background: linear-gradient(180deg, #6c757d 0%, #5c636a 100%);
}

#FeedbackOKButton {
    background: linear-gradient(180deg, #198754 0%, #157347 100%);
}

button[onclick*="ShowAnswers"],
button[onclick*="ShowHint"] {
    background: linear-gradient(180deg, #ffc107 0%, #e0a800 100%);
    color: #000;
}


/* ===============================================================
   NAVIGATION QUESTIONS
   =============================================================== */

.QuestionNavigation {
    margin-bottom: 1rem;
}

.QNum {
    font-weight: bold;
    margin: 0 1rem;
}


/* ===============================================================
   FEEDBACK
   =============================================================== */

#FeedbackDiv {
    position: relative !important;
    margin: 1.4rem auto 0 auto;
    padding: 1.25rem 1.4rem;

    max-width: 560px;
    width: 100%;

    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    border: 1px solid #d0d7de;
    border-radius: 14px;

    box-shadow: 0 10px 25px rgba(0,0,0,.15);

    font-size: 0.95rem;
    line-height: 1.45;

    animation: feedbackFade .2s ease-in;
    display: none;
}

#FeedbackDiv .FeedbackText {
    margin-bottom: 1rem;
}

@keyframes feedbackFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ===============================================================
   CORRECTIONS
   =============================================================== */

.CorrectAnswer,
.Guess {
    font-weight: bold;
}

.Highlight {
    color: #000;
    background-color: #ffff00;
    font-weight: bold;
    font-size: 120%;
}


/* ===============================================================
   IMPRESSION
   =============================================================== */

@media print {

    .FuncButton,
    .QuestionNavigation,
    #FeedbackDiv {
        display: none !important;
    }

    .QuizQuestion {
        border-bottom: none;
    }
}

.hp-btn-hover{
  background-color: var(--bs-primary);
  color:#fff;
  transition: all .15s ease;
}

.hp-btn-active{
  transform: scale(0.97);
  filter: brightness(0.9);
}