/* =========================================================
   QCM
   ========================================================= */

.qcm-box{
    position:absolute;
    overflow:visible;
    left:50%;
    bottom:30px;
    transform:translateX(-50%);
    width:min(750px,80vw);
    background:
        linear-gradient(
            180deg,
            rgba(8,22,32,0.55),
            rgba(5,14,22,0.60)
        );
    backdrop-filter:blur(10px);
    border:
        1px solid
        rgba(120,220,255,0.10);
    border-radius:16px;
    padding:18px;
    z-index:999999;
    display:none;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        0 0 30px rgba(0,180,255,0.08);
}
.qcm-visible{
    display:block;
}

/* =========================================================
   REPONSES
   ========================================================= */

.qcm-answers{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:6px;
}

.qcm-answer{
    min-height:36px;
    border:
        1px solid
        rgba(120,220,255,0.10);
    border-radius:18px;
    background:
        rgba(255,255,255,0.05);
    color:#e8f7ff;
    font-size:30px;
    font-weight:500;
    cursor:pointer;
    padding:4px 8px;
    transition:
        background 0.2s,
        border-color 0.2s,
        transform 0.2s;
}

.qcm-answer:hover{
    background:
        rgba(80,180,220,0.12);
    border-color:
        rgba(120,220,255,0.25);
    transform:translateY(-1px);
}

.qcm-answer.bonne{
    background:
        rgba(0,140,110,0.85);
    border-color:
        rgba(120,255,220,0.35);
    color:#fff;
}

.qcm-answer.mauvaise{
    background:
        rgba(140,40,50,0.82);
    border-color:
        rgba(255,120,120,0.25);
    color:#fff;
}

/* =========================================================
   BARRE BASSE
   ========================================================= */

.qcm-bottom{
    display:grid;
    grid-template-columns:
        110px
        1fr
        160px
        56px;
    align-items:center;
    gap:12px;
    margin-top:14px;
}

.qcm-score{
    color:#8edfff;
    font-size:30px;
    font-weight:500;
    text-align:left;
}

.qcm-question{
    color:#ffffff;
    font-size:25px;
    font-weight:500;
    text-align:center;
    margin:0;
    letter-spacing:0.2px;
}

.qcm-next{
    height:40px;
    border:none;
    border-radius:14px;
    background:
        linear-gradient(
            180deg,
            #5fd7ff,
            #3baed8
        );
    color:#041018;
    font-size:25px;
    font-weight:500;
    cursor:pointer;
    transition:
        transform 0.2s,
        filter 0.2s;
}

.qcm-next:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
}

.qcm-next:disabled{
    opacity:0.35;
    cursor:default;
    transform:none;
}

.qcm-close{
    width:50px;
    height:50px;
    border:none;
    border-radius:999px;
    background:
        rgba(255,255,255,0.08);
    color:#dff7ff;
    font-size:30px;
    cursor:pointer;
    transition:
        background 0.2s,
        transform 0.2s;
}

.qcm-close:hover{
    background:
        rgba(120,220,255,0.14);
    transform:rotate(90deg);
}

/* =========================================================
   FIN
   ========================================================= */

.qcm-finish{
    color:#ffffff;
    font-size:42px;
    font-weight:700;
    text-align:center;
    padding:20px 0;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px){

    .qcm-box{
        bottom:90px;
        padding:14px;
        border-radius:20px;
    }

    .qcm-answers{
        grid-template-columns:1fr;
    }

    .qcm-answer{
        min-height:60px;
        font-size:18px;
    }

    .qcm-bottom{
        grid-template-columns:
            70px
            1fr
            110px
            46px;
        gap:8px;
    }

    .qcm-score{
        font-size:15px;
    }

    .qcm-question{
        font-size:16px;
    }

    .qcm-next{
        height:42px;
        font-size:14px;
    }

    .qcm-close{
        width:42px;
        height:42px;
        font-size:18px;
    }
}