/* ==========================================
   CoreenApp — Design des interrogations
   Harmonisation avec les leçons
   ========================================== */

/* Boutons de réponse des interrogations */
.exam-answer-pretty {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 62px;

  padding: 14px 20px;
  margin: 10px 0;

  border: 3px solid #eadff1 !important;
  border-radius: 22px !important;

  background: #ffffff !important;
  color: #5d4869 !important;

  font-family: inherit;
  font-size: 22px !important;
  font-weight: 700 !important;

  box-shadow: 0 5px 0 #eee4f2;

  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;

  -webkit-tap-highlight-color: transparent;
}

.exam-answer-pretty:hover {
  background: #faf4ff !important;
  border-color: #d9c2eb !important;
}

.exam-answer-pretty:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #eee4f2;
}

.exam-answer-pretty:focus-visible {
  outline: 3px solid #b78cdb;
  outline-offset: 3px;
}

.exam-answer-pretty:disabled {
  cursor: default;
  opacity: .8;
}


/* EXAM3 : CORÉEN ET FRANÇAIS SUR DEUX LIGNES */

#exam3Screen .exam3-option.exam-answer-pretty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 88px;
}

#exam3Screen .exam3-option .exam3-korean {
    display: block !important;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.3;
}

#exam3Screen .exam3-option .exam3-french {
    display: block !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #89758f;
}


/* COREENAPP : BOUTONS AUDIO UNIFORMISÉS */

.exam3-listen,
.listen-button,
.exam-audio-pretty {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;

    width: auto !important;
    min-height: 45px;

    padding: 9px 16px !important;

    background: linear-gradient(
        120deg,
        #f49acb,
        #bd9cf8
    ) !important;

    border: 2px solid white !important;
    border-radius: 17px !important;

    color: #27202c !important;
    font-family: inherit;
    font-size: 19px !important;
    font-weight: 500 !important;

    box-shadow: 0 5px 0 #d987b6 !important;

    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.exam3-listen:hover,
.listen-button:hover,
.exam-audio-pretty:hover {
    filter: brightness(1.04);
}

.exam3-listen:active,
.listen-button:active,
.exam-audio-pretty:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #d987b6 !important;
}


/* EXAM3 : PALETTE ROSE MAUVE */

/* Fond général de l'interrogation */
#exam3Screen {
    background: #fff7fc !important;
    color: #5d4869 !important;
}

/* Cartes et zones de questions */
#exam3Screen .exam3-card,
#exam3Screen .exam3-question,
#exam3Screen .exam3-panel {
    background: #ffffff !important;
    border-color: #efdef3 !important;
    color: #5d4869 !important;
}

/* Boutons de réponse */
#exam3Screen .exam3-option {
    background: #ffffff !important;
    border-color: #eadff1 !important;
    color: #5d4869 !important;
}

/* Survol */
#exam3Screen .exam3-option:hover:not(:disabled) {
    background: #fcf5ff !important;
    border-color: #d9c2eb !important;
}

/* Bouton de retour */
#exam3Screen .exam3-back {
    background: transparent !important;
    color: #5d4869 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Couleurs des titres */
#exam3Screen h1,
#exam3Screen h2,
#exam3Screen h3 {
    color: #5d4869 !important;
}
