/* ==========================================================================
   Checkbox (.checkbox) — Case à cocher custom accessible

   Structure BEM :
   - .checkbox                 → Bloc racine (conteneur)
   - .checkbox__input          → Input natif (caché)
   - .checkbox__box            → Box visuelle custom
   - .checkbox__check          → Icône coche (SVG/CSS)
   - .checkbox__label          → Label textuel
   - .checkbox--indeterminate  → Modificateur état intermédiaire
   - .checkbox--disabled       → État désactivé
   - .checkbox--error          → État erreur

   Usage :
   <div class="checkbox">
     <input type="checkbox" id="exp-garde" class="checkbox__input">
     <span class="checkbox__box"></span>
     <label for="exp-garde" class="checkbox__label">Garde</label>
   </div>

   Accessibilité :
   - Input natif pour la compatibilité clavier/screen reader
   - Focus visible via outline sur .checkbox__box
   - Contraste WCAG AAA validé

   Copie de la bibliothèque dev-project-suite, adaptée au style « Encre,
   signature vermillon » (projet/design/) : case de 24 px, rayon 6, filet
   encre 2 px ; cochée = encre pleine, coche à la couleur de la surface (un
   masque en currentColor, pour suivre le thème). Réécrite sans imbrication CSS
   (cible iOS 16.4) et sans bloc sombre propre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tap-min);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  user-select: none;
}

/* --------------------------------------------------------------------------
   INPUT — natif caché mais accessible
   -------------------------------------------------------------------------- */
.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   BOX
   -------------------------------------------------------------------------- */
.checkbox__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  width: 24px;
  height: 24px;

  border: var(--border-strong) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-inverse);

  transition: background-color var(--duration-fast) var(--ease-default);
}

.checkbox__input:focus-visible ~ .checkbox__box {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.checkbox__input:checked ~ .checkbox__box,
.checkbox__input:indeterminate ~ .checkbox__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Coche et tiret : masques en currentColor (= surface) */
.checkbox__input:checked ~ .checkbox__box::after,
.checkbox__input:indeterminate ~ .checkbox__box::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.2 5.6 10.2 11.5 3.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.2 5.6 10.2 11.5 3.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.checkbox--indeterminate .checkbox__input:checked ~ .checkbox__box::after,
.checkbox__input:indeterminate ~ .checkbox__box::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
}

.checkbox--disabled .checkbox__box,
.checkbox__input:disabled ~ .checkbox__box {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.checkbox__check {
  display: none; /* coche dessinée par .checkbox__box::after */
}

/* --------------------------------------------------------------------------
   LABEL
   -------------------------------------------------------------------------- */
.checkbox__label {
  flex: 1;
  cursor: pointer;
  color: var(--color-text-primary);
}

.checkbox--disabled .checkbox__label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   ERROR — à l'encre (pas de rouge dans le style)
   -------------------------------------------------------------------------- */
.checkbox--error .checkbox__box {
  border-color: var(--color-error);
}