/* Pastilles ——————————————————————— */
.pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--fs-small);
  font-weight: 300;
  gap: var(--space-4);
  line-height: 1; 
  padding: var(--space-8) var(--space-12);
}

summary.section-heading {
  .pill {
    background-color: var(--color-surface-lighter);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
  }
}
/* Variante : matières choisies*/
[data-feedback="form-feedback-info"] {
  background-color: var(--color-secondary-100);
  /*border: 1px solid var(--color-accent);*/
  color: var(--color-primary);
}

/* Variante : contour sans fond */
.pill--outline {
  border: 1px solid var(--color-border-light);
}

/* Variante : bêta */
.pill--beta {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.05rem;
  padding: var(--space-4) var( --space-12) 3px;
  text-transform: uppercase;
}

/* Pastille de statut ——————————————————————— */
.status-pill {
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);

  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M12 7v5l3 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
  }
}

/* Variante : en attente */
[data-status="pending"] {
  background-color: var(--color-accent-light);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* Variante : en cours d'étude */
[data-status="in-progress"] {
  background-color: var(--color-primary-100);
  border: 1px solid var(--color-secondary-dark);
  color: var(--color-secondary-dark);
}

/* Variante : Résolue */
[data-status="resolved"] {
  background-color: var(--color-success-100);
  border: 1px solid var(--color-success-dark);
  color: var(--color-success-dark);
}

/* Variante : Archivée */
[data-status="archived"] {
  background-color: var(--color-surface-light);
  border: 1px solid color-mix(in lab, transparent, var(--color-body-text) 30%);
  color: color-mix(in lab, transparent, var(--color-body-text) 40%);

  &::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M11.9998 11H7.99976V10H11.9998V11Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 4.5V7.5L16.5 8H16V15.5L15.5 16H4.5L4 15.5V8H3.5L3 7.5V4.5L3.5 4H16.5L17 4.5ZM5 15H15V8H5V15ZM4 7H16V5H4V7Z' fill='black'/%3E%3C/svg%3E");
  }
}