/* =============================================================
   Socle · Case à cocher (.sc-checkbox)
   Ce fichier porte aussi l'enveloppe .sc-choice, partagée par la
   case à cocher, le bouton radio et l'interrupteur.
   Consomme uniquement des tokens sémantiques.
   Anatomie : label.sc-choice > contrôle + .sc-choice__text
              (.sc-choice__label + .sc-choice__description)
   ============================================================= */

/* ---- Enveloppe partagée (case, radio, interrupteur) ---- */

.sc-choice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--gap-s);
  cursor: pointer;
}

.sc-choice__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sc-choice__label {
  color: var(--color-text);
  font-size: var(--text-label-size);
  /* Une ligne de libellé fait la hauteur du contrôle : les deux
     s'alignent sans décalage. */
  line-height: var(--leading-normal);
}

.sc-choice__description {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  line-height: var(--leading-snug);
}

.sc-choice[data-disabled],
.sc-choice:has(:is(:disabled, [data-disabled])) {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Liste de choix : plusieurs enveloppes empilées. */
.sc-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

/* ---- Case à cocher ---- */

.sc-checkbox {
  /* Tokens de composant : les états ne font que réassigner ceci.
     La taille du contrôle est une dimension structurelle. */
  --_checkbox-size: var(--space-20);
  --_checkbox-bg: var(--color-bg-surface);
  --_checkbox-border: var(--color-border-strong);
  --_checkbox-mark: var(--color-text-on-accent);

  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: var(--_checkbox-size);
  height: var(--_checkbox-size);
  background: var(--_checkbox-bg);
  border: var(--border-hairline) solid var(--_checkbox-border);
  border-radius: var(--radius-control-s);
  cursor: pointer;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

/* Coche dessinée en CSS : un rectangle découpé au clip-path,
   en couleur de texte sur accent. Jamais d'image. */
.sc-checkbox::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  background: var(--_checkbox-mark);
  clip-path: polygon(14% 45%, 4% 55%, 40% 88%, 96% 21%, 86% 12%, 38% 68%);
  transform: scale(0);
  transition: transform var(--motion-fast);
}

.sc-checkbox:checked::before {
  transform: scale(1);
}

/* Indéterminé : même pseudo-élément, découpé en barre.
   L'état réel se pose en JavaScript (el.indeterminate = true) ;
   l'attribut sert à la simulation dans la documentation. */
.sc-checkbox:is(:indeterminate, [data-state="indeterminate"])::before {
  clip-path: polygon(8% 43%, 92% 43%, 92% 57%, 8% 57%);
  transform: scale(1);
}

/* ---- États ---- */

.sc-checkbox:is(:checked, :indeterminate, [data-state="indeterminate"]) {
  --_checkbox-bg: var(--color-accent);
  --_checkbox-border: var(--color-accent);
}

.sc-checkbox:hover:not(:disabled),
.sc-checkbox[data-state="hover"] {
  --_checkbox-border: var(--color-border-hover);
}

.sc-checkbox:is(:checked, :indeterminate, [data-state="indeterminate"]):is(:hover:not(:disabled), [data-state="hover"]) {
  --_checkbox-bg: var(--color-accent-hover);
  --_checkbox-border: var(--color-accent-hover);
}

.sc-checkbox:active:not(:disabled),
.sc-checkbox[data-state="active"] {
  --_checkbox-bg: var(--color-bg-active);
  --_checkbox-border: var(--color-border-hover);
}

.sc-checkbox:is(:checked, :indeterminate, [data-state="indeterminate"]):is(:active:not(:disabled), [data-state="active"]) {
  --_checkbox-bg: var(--color-accent-active);
  --_checkbox-border: var(--color-accent-active);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-checkbox[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-checkbox:disabled,
.sc-checkbox[data-disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Dans une enveloppe .sc-choice, l'opacité est portée par
   l'enveloppe : on ne la cumule pas sur le contrôle. */
.sc-choice .sc-checkbox:disabled,
.sc-choice .sc-checkbox[data-disabled] {
  opacity: 1;
}