/*Custom radio buttons*/
.exam-question {
    /* Styles pour les radio buttons personnalisés */

    .radio-button-group {
        display: flex;
        gap: 15px;
        margin-left: 15px;
    }

    /* Cache les radio buttons natifs */

    .radio-btn-hidden {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Style des labels comme boutons */

    label.radio-btn-label {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 8px 18px;
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        border: 3px solid #0c3d5d;
        border-radius: 8px;
        background-color: #ffffff;
        color: #0c3d5d;
        transition: all 0.3s ease;
        min-width: 130px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Case à cocher personnalisée */

    label.radio-btn-label::before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 3px solid #0c3d5d;
        border-radius: 4px;
        background-color: #ffffff;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    /* État hover */

    label.radio-btn-label:hover {
        background-color: #e6f2f8;
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    }

    /* État appuyé (checked) */

    .radio-btn-hidden:checked + label.radio-btn-label {
        background-color: #0c3d5d;
        color: #ffffff;
        transform: translateY(2px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
    }

    /* Case cochée quand le bouton est sélectionné */

    .radio-btn-hidden:checked + label.radio-btn-label::before {
        background-color: #ffffff;
        border-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c3d5d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: 20px 20px;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* État focus pour l'accessibilité */

    .radio-btn-hidden:focus + label.radio-btn-label {
        outline: 3px solid #4CAF50;
        outline-offset: 2px;
    }
}