/* Quiz steps (commun à quiz-1, quiz-2) */

.quiz-screen{
    display:grid; grid-template-columns:555px 1fr;
    min-height:100vh;
    padding-top:100px;
    background:var(--c-white);
}
.quiz-screen__aside{
    background:var(--c-white);
    padding:80px 86px;
    display:flex; align-items:center; justify-content:center;
}
.quiz-screen__illu{
    width:100%; height:100%; max-height:854px;
    border-radius:var(--r-md);
    background:var(--c-blue-light) url("../assets/img/card-comprendre.jpg") center/cover;
}
.quiz-screen__main{
    padding:60px 200px 80px 152px;
    display:flex; align-items:center;
}
.quiz-screen__content{
    width:100%;
    display:flex; flex-direction:column; gap:32px;
}
.quiz-screen__head{ display:flex; flex-direction:column; gap:16px; }
.quiz-screen__step{
    font-family:var(--f-display); font-weight:600; font-size:14px;
    color:var(--c-green); line-height:1.2;
}
.quiz-screen__question{
    font-family:var(--f-display); font-weight:700; font-size:24px; line-height:1.2;
    color:var(--c-blue);
}

.quiz-form{ display:flex; flex-direction:column; gap:32px; }
.quiz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quiz-answer{
    height:200px;
    border-radius:12px;
    padding:40px 24px 20px;
    display:flex; flex-direction:column; align-items:center; gap:24px;
    cursor:pointer;
    transition:transform .2s, box-shadow .2s, border-color .2s;
    border:6px solid transparent;
    text-align:center;
}
.quiz-answer:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.quiz-answer input{ position:absolute; opacity:0; pointer-events:none; }
.quiz-answer--a{ background:var(--c-rose-pale); }
.quiz-answer--b{ background:var(--c-blue-pale); }
.quiz-answer--c{ background:var(--c-yellow-pale); }
.quiz-answer--d{ background:var(--c-mint); }
.quiz-answer:has(input:checked){
    border-color:var(--c-yellow);
    box-shadow:0 8px 14.85px rgba(0,0,0,.1);
}
.quiz-letter{
    border:1.8px solid var(--c-blue);
    border-radius:45px;
    padding:12px 16px;
    font-family:var(--f-display); font-weight:600; font-size:18px;
    color:var(--c-blue);
    min-width:48px;
}
.quiz-text{
    font-family:var(--f-display); font-weight:700; font-size:20px; line-height:1.2;
    color:var(--c-blue);
}

.quiz-validate{
    background:var(--c-green); color:var(--c-white);
    border:2px solid var(--c-green);
    border-radius:12px;
    padding:16px 24px;
    width:100%;
    font-family:var(--f-display); font-weight:600; font-size:16px;
    cursor:pointer;
    transition:background .2s, transform .2s;
}
.quiz-validate:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.quiz-form:not(:has(input:checked)) .quiz-validate{ opacity:.4; pointer-events:none; }

.quiz-progress{
    display:flex; gap:6px; align-items:center;
    margin-top:16px;
}
.quiz-progress span{
    flex:1; height:6px; border-radius:100px;
    background:var(--c-blue-pale);
    transition:background .3s;
}
.quiz-progress span.is-done{ background:var(--c-green); }

@media (max-width: 980px){
    .quiz-screen{ grid-template-columns:1fr; }
    .quiz-screen__aside{ padding:24px; }
    .quiz-screen__illu{ height:240px; }
    .quiz-screen__main{ padding:24px; }
    .quiz-grid{ grid-template-columns:1fr; }
}