/* ============================================================
   PAGE RÉVISION
============================================================ */
.revision-section {
    margin-top: 30px;
}
.revision-section h3 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.revision-section p {
    text-align: center;
    margin-bottom: 20px;
}
/* ============================================================
   QUIZ
============================================================ */
.quiz-box {
    text-align: center;
    padding: 25px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.1);
}
.quiz-letter {
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 25px;
}
.big {
    font-size: 3.2rem;
    direction: rtl;
    margin-bottom: 20px;
}
/* ============================================================
   BOUTONS
============================================================ */
.quiz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}
.quiz-btn,
.refresh-btn,
.reveal-btn {
background: var(--primary-color);
color: white;

border: none;
border-radius: 10px;

padding: 12px 18px;

font-size: 1rem;
cursor: pointer;

transition: .25s;

}
.quiz-btn:hover,
.refresh-btn:hover,
.reveal-btn:hover {
transform: translateY(-2px);
opacity: .9;

}
.quiz-btn {
    font-size: 2rem;
}
/* ============================================================
   RÉSULTATS
============================================================ */
.quiz-result {
margin-top: 20px;
min-height: 30px;

font-size: 1.15rem;
font-weight: bold;

color: var(--accent-color);

}
/* ============================================================
   SOURETH
============================================================ */
.soureth {
font-size: 2.8rem;
direction: rtl;
line-height: 1.6;

}
/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:768px){
.quiz-box{
padding:20px;

}
.quiz-letter{
font-size:2.2rem;

}
.big{
font-size:2.7rem;

}
.quiz-btn{
font-size:1.7rem;

}
}
@media (max-width:480px){
.quiz-options{
grid-template-columns:repeat(2,1fr);

}
.quiz-letter{
font-size:2rem;

}
.big{
font-size:2.3rem;

}
.refresh-btn,
.reveal-btn{
width:100%;

}
}