.isi-check-group {
    position: relative; /* ancre .isi-check-feedback */
    }

/* Visuellement masquée mais toujours "listée" et focusable au clavier (contrairement
   à display:none, qui l'exclurait de la validation et du tabindex). */
.isi-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    }

.isi-check {
    display: block;
    text-align: left;
    cursor: pointer;
    }

.isi-check-input:disabled + .isi-check {
    cursor: default;
    opacity: 0.65;
    }

.isi-check-input:focus-visible + .isi-check {
    outline: 2px solid var(--primary, #375a7f);
    outline-offset: 2px;
    }

.isi-check-icon::before {
    padding-right: 0.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* solid */
    content: var(--isi-check-icon-unchecked, '\f0c8'); /* <i class="fas fa-square"></i> */
    }

.isi-check-input:checked + .isi-check .isi-check-icon::before {
    content: var(--isi-check-icon-checked, '\f14a'); /* <i class="fas fa-check-square"></i> */
    }

/* État "coché" par défaut (aucune classe isi-check-outline-* posée, c-à-d
   option 'color' laissée à sa valeur par défaut 'primary') — même formule que
   les variantes ci-dessous, pas de couleur codée en dur. */
.isi-check-input:checked + .isi-check {
    color: var(--primary);
    border-color: var(--primary);
    background-color: Transparent;
    }

/* Variantes de couleur (option 'color' de IsiCheckboxType) : texte + bordure
   teintés, fond transparent. .isi-check-outline-{color} vient toujours
   COMPLÉTER .isi-check (jamais le remplacer), donc les deux classes sont
   exigées dans le sélecteur pour ne prendre le dessus que sur la couleur, pas
   sur le reste du style de base. isi-check-outline-primary duplique la règle
   par défaut ci-dessus — conservée pour un usage explicite en Twig écrit à la
   main (hors composant Form), comme sur les autres écrans déjà migrés. */
.isi-check-input:checked + .isi-check.isi-check-outline-primary   { color: var(--primary);   border-color: var(--primary);   background-color: Transparent; }
.isi-check-input:checked + .isi-check.isi-check-outline-secondary { color: var(--secondary); border-color: var(--secondary); background-color: Transparent; }
.isi-check-input:checked + .isi-check.isi-check-outline-success   { color: var(--success);   border-color: var(--success);   background-color: Transparent; }
.isi-check-input:checked + .isi-check.isi-check-outline-danger    { color: var(--danger);    border-color: var(--danger);    background-color: Transparent; }
.isi-check-input:checked + .isi-check.isi-check-outline-warning   { color: var(--warning);   border-color: var(--warning);   background-color: Transparent; }
.isi-check-input:checked + .isi-check.isi-check-outline-info      { color: var(--info);      border-color: var(--info);      background-color: Transparent; }
.isi-check-input:checked + .isi-check.isi-check-outline-light     { color: var(--light);     border-color: var(--light);     background-color: Transparent; }
.isi-check-input:checked + .isi-check.isi-check-outline-dark      { color: var(--dark);      border-color: var(--dark);      background-color: Transparent; }

/* Posée par isi-check.js seulement après un submit refusé — sinon :invalid
   afficherait l'erreur en continu dès le chargement de la page. */
.isi-check-input.isi-check-invalid + .isi-check {
    color: var(--danger);
    border-color: var(--danger);
    background-color: Transparent;
    }

.isi-check-feedback {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 0.5em;
    color: var(--danger);
    font-weight: bold;
    background: white;
    border: 1px solid #dc3545;
    border-radius: 4px;
    text-align: left;
    }

.isi-check-feedback::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    border: 5px solid transparent;
    border-bottom-color: #dc3545;
    }