input[type="checkbox"] {
    /* reset */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;

    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;

    /* style du "pion" */
    border-radius: 4px;
    background: rgba($elementum-primary, 0.95);
    /* primary assombri */
    border: 1px solid rgba($elementum-text-primary, 0.7);
    /* secondary */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.7);

    position: relative;
    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

/* croix "médiévale" à l'intérieur */
input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 3px;

    background:
        linear-gradient(45deg,
            transparent 45%,
            $elementum-text-primary 45%,
            $elementum-text-primary 55%,
            transparent 55%),
        linear-gradient(-45deg,
            transparent 45%,
            $elementum-text-primary 45%,
            $elementum-text-primary 55%,
            transparent 55%);

    opacity: 0;
    transform: scale(0.7);
    transform-origin: center;
    transition:
        opacity 0.12s ease,
        transform 0.12s ease;
}

/* état checked : croix visible + effet “sceau” */
input[type="checkbox"]:checked {
    background: $elementum-primary;
    box-shadow:
        // inset 0 0 0 1px rgba($elementum-text-primary, 0.8),
        0 0 0 1px rgba($elementum-text-primary, 0.5),
        0 0 10px rgba($elementum-text-primary, 0.4);
}

input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: scale(1);
}

/* focus accessible */
input[type="checkbox"]:focus-visible {
    outline: 1px solid rgba($elementum-text-primary, 0.9);
    outline-offset: 1px;
}