/**
 * SDC FormFieldCheckbox — styles scoped.
 *
 * Pas d @layer, pas de !important, pas de Tailwind dans le Twig.
 *
 * UX choix :
 *  - case 1.25rem (20px) avec padding visuel pour cible tap 44x44px via
 *    le label englobant (RGAA SC 2.5.5 Target Size).
 *  - check natif Drupal style sobre (laisse l OS rendre la coche selon
 *    le theme system pour cohérence Mac/Win/Linux/iOS/Android).
 *  - focus ring sur l input ET sur le label texte pour conformite (le
 *    keyboard user voit l etat sans avoir a deviner).
 *  - Erreur : bordure label en rouge + couleur erreur sur le texte.
 */

.previensmoi-form-field-checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--previensmoi-space-2);
  margin-bottom: var(--previensmoi-space-4);
  font-family: var(--previensmoi-font-sans);
  color: var(--previensmoi-color-ink-700);
}

.previensmoi-form-field-checkbox__label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--previensmoi-space-3);
  padding: var(--previensmoi-space-2);
  margin: calc(var(--previensmoi-space-2) * -1);
  border-radius: var(--previensmoi-radius-md);
  font-size: var(--previensmoi-fontsize-base);
  color: var(--previensmoi-color-ink-800);
  cursor: pointer;
  min-height: 2.75rem;
}

.previensmoi-form-field-checkbox__label:hover {
  background-color: var(--previensmoi-color-paper-100);
}

.previensmoi-form-field-checkbox__input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  cursor: pointer;
  accent-color: var(--previensmoi-color-primary-600);
}

.previensmoi-form-field-checkbox__input:focus-visible {
  outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
  outline-offset: var(--previensmoi-focus-ring-offset);
}

.previensmoi-form-field-checkbox__label-text {
  flex: 1 1 auto;
  line-height: var(--previensmoi-lineheight-normal);
}

.previensmoi-form-field-checkbox__required-marker {
  color: var(--previensmoi-color-error-500);
  font-weight: var(--previensmoi-fontweight-bold);
  margin-left: var(--previensmoi-space-1);
}

.previensmoi-form-field-checkbox__help {
  margin: 0;
  font-size: var(--previensmoi-fontsize-sm);
  color: var(--previensmoi-color-ink-600);
}

.previensmoi-form-field-checkbox__error {
  margin: 0;
  font-size: var(--previensmoi-fontsize-sm);
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-error-500);
}

/* Etat error — encadrement visuel du label pour visibilite. */
.previensmoi-form-field-checkbox--error .previensmoi-form-field-checkbox__label {
  outline: 2px solid var(--previensmoi-color-error-500);
  outline-offset: 0;
}

/* Helper a11y. */
.previensmoi-form-field-checkbox .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}