/*
 * Case à cocher personnalisée (formulaires) — visuel entièrement piloté par
 * CSS (`:has(input:checked)`), aucun JS requis.
 */

.cb-box {
    width: 26px;
    height: 26px;
    border-radius: var(--mr-r-s);
    border: 2px solid var(--mr-brun);
    background: var(--mr-blanc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.cb-check {
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.15s ease, transform 0.2s var(--mr-ease-bounce);
}

.cb-label:hover .cb-box {
    border-color: var(--mr-corail);
}

.cb-label:has(input:checked) .cb-box,
.cb-label.is-checked .cb-box {
    background: var(--mr-brun);
    border-color: var(--mr-brun);
}

.cb-label:has(input:checked) .cb-check,
.cb-label.is-checked .cb-check {
    opacity: 1;
    transform: none;
}

.cb-label:has(input:focus-visible) .cb-box {
    outline: 3px solid var(--mr-brun);
    outline-offset: 3px;
}

html.a11y-contrast .cb-box,
html.a11y-enhanced .cb-box {
    border-color: var(--mr-encre) !important;
}

html.a11y-contrast .cb-label:has(input:checked) .cb-box,
html.a11y-contrast .cb-label.is-checked .cb-box,
html.a11y-enhanced .cb-label:has(input:checked) .cb-box,
html.a11y-enhanced .cb-label.is-checked .cb-box {
    background: var(--mr-encre) !important;
    border-color: var(--mr-encre) !important;
}