input.btn-large-primary {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    background-color: #ff0000;
    color: white;
    border-color: #ff0000;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 10px;
    justify-content: flex-end;
    float: right;
}

a.btn-large-secondary {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    color: white;
    padding: 10px 10px;
    margin-bottom: 10px;
    justify-content: flex-end;
    float: right;
    margin-bottom: 10px;
    align-content: center;
    font-weight: 400;
    border-radius: 0.5rem;
    line-height: 1.5;
}

input[type="radio"].radio-large-vert {
    width: 2em;
    height: 2em;
    accent-color: #00ff00; /* facultatif : couleur personnalisée */
}

input[type="radio"].radio-large-jaune {
    width: 2em;
    height: 2em;
    accent-color: #ffff00; /* facultatif : couleur personnalisée */
}

input[type="radio"].radio-large-rouge {
    width: 2em;
    height: 2em;
    accent-color: #ff0000; /* facultatif : couleur personnalisée */
}



.checkbox-wrapper {
    display: inline-block;
    position: relative;
    margin: 1px;
}

    /* Masquer visuellement la vraie checkbox mais garder accessibilité */
    .checkbox-wrapper input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Style du label qui devient la "case" */
    .checkbox-wrapper label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 35px;
        margin: 5px;
        border: 1px solid #c1b8b8;
        border-radius: 3px;
        font-family: system-ui, sans-serif;
        font-weight: 300;
        color: #000;
        cursor: pointer;
        user-select: none;
        background: #fff;
        transition: all 0.2s ease;
    }

    /* État coché */
    .checkbox-wrapper input[type="checkbox"]:checked + label {
        background: #0b79d0;
        color: white;
        border-color: #0b79d0;
    }

    /* État focus clavier */
    .checkbox-wrapper input[type="checkbox"]:focus + label {
        outline: 13px solid rgba(11,121,208,0.25);
        outline-offset: 4px;
    }

    /* Hover */
    .checkbox-wrapper label:hover {
        background: #f0f0f0;
    }



.radio-carre {
    display: inline-block;
    position: relative;
    margin: 1px;
}

    /* Masquer visuellement le vrai radio mais garder accessibilité */
    .radio-carre input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Le label devient le carré cliquable */
    .radio-carre label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 35px;
        border: 2px solid #c1b8b8;
        border-radius: 8px;
        font-family: system-ui, sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        user-select: none;
        background: #fff;
        transition: all 0.2s ease;
    }

    .radio-carre.petit label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 25px;
        border: 2px solid #c1b8b8;
        border-radius: 4px;
        font-family: system-ui, sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        user-select: none;
        background: #fff;
        transition: all 0.2s ease;
    }

    /* Quand le radio est sélectionné */
    .radio-carre.acquis input[type="radio"]:checked + label {
        background: #27c109;
        color: white;
        border-color: #27c109;
    }

    .radio-carre.partiel input[type="radio"]:checked + label {
        background: #ffc300;
        color: white;
        border-color: #ffc300;
    }

    .radio-carre.nonacquis input[type="radio"]:checked + label {
        background: #ff0000;
        color: white;
        border-color: #ff0000;
    }

    /* Focus clavier visible */
    .radio-carre input[type="radio"]:focus + label {
        /*outline: 3px solid rgba(11,121,208,0.25);*/
        /*outline-offset: 4px;*/
    }

    /* Effet hover */
    .radio-carre label:hover {
        background: #f5f5f5;
    }

    /* Style pour radio-carre acquis */
    .radio-carre.acquis label {
        border-color: #27c109;
        color: #27c109;
    }

    .radio-carre.acquis input[type="radio"]:checked + label {
        background: #27c109;
        color: #ffffff;
        border-color: #27c109;
    }

    /* Style pour radio-carre non acquis */
    .radio-carre.nonacquis label {
        border-color: #ff0000;
        color: #ff0000;
    }

    .radio-carre.nonacquis input[type="radio"]:checked + label {
        background: #ff0000;
        color: #ffffff;
        border-color: #ff0000;
    }

    /* Style pour radio-carre partiel */
    .radio-carre.partiel label {
        border-color: #ffc300;
        color: #ffc300;
    }

    .radio-carre.partiel input[type="radio"]:checked + label {
        background: #ffc300;
        color: #ffffff;
        border-color: #ffc300;
    }

    /* Style pour radio-carre non evalué */
    .radio-carre.nonevalue label {
        border-color: #c1b8b8;
        color: #c1b8b8;
    }

    .radio-carre.nonevalue input[type="radio"]:checked + label {
        background: #c1b8b8;
        color: #ffffff;
        border-color: #c1b8b8;
    }