@layer components {
  /* Wrapper de formulaire — applique un espacement vertical entre groupes
     sans nécessiter d'utility class. Facultatif (les pages utilisent souvent
     `<form>` nu avec des `.form-group` directs). */
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Hint global du formulaire (vs `.form-group__hint` qui est par champ) */
  .form__hint {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
  }

  /* Ligne de plusieurs champs côte à côte (cf. `.form-row`, alias plus
     parlant pour le BO qui privilégie le namespace `form__*`). */
  .form__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .form__row > .form-group,
  .form__row > .form__field {
    flex: 1 1 12rem;
    min-width: 0;
  }

  /* Alias `.form__field` (BEM) pour `.form-group` — utilisé dans le BO */
  .form__field {
    margin-bottom: var(--space-4);
  }

  .form-group {
    margin-bottom: var(--space-4);
  }

  .form-group__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
  }

  .form-group__label--required::after {
    content: ' *';
    color: var(--status-danger-text);
  }

  .form-group__input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .form-group__input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgb(25 118 210 / 0.15);
  }

  .form-group__input--error {
    border-color: var(--status-danger-text);
  }

  .form-group__input--error:focus {
    box-shadow: 0 0 0 3px rgb(211 47 47 / 0.15);
  }

  .form-group__error {
    font-size: var(--font-size-sm);
    color: var(--status-danger-text);
    margin-top: var(--space-1);
  }

  .form-group__hint {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
  }

  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* Chaque champ a une base de 12rem (~192px) pour rester lisible ; en
     dessous, `flex-wrap` empile sur plusieurs lignes au lieu de déborder.
     `min-width: 0` autorise le shrink sous la base si besoin (évite que
     les inputs larges ne forcent l'overflow horizontal). */
  .form-row > .form-group {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    justify-content: center;
    margin-top: var(--space-6);
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn--primary {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
  }

  .btn--primary:hover:not(:disabled) {
    background-color: var(--accent-primary-hover);
  }

  .btn--secondary {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
  }

  .btn--secondary:hover:not(:disabled) {
    background-color: var(--surface-tertiary);
  }

  .btn--danger {
    background-color: var(--status-danger-text);
    color: var(--color-neutral-0);
  }

  .btn--danger:hover:not(:disabled) {
    background-color: var(--color-danger-700);
  }

  .btn--ghost {
    background-color: transparent;
    color: var(--text-link);
    padding: var(--space-1) var(--space-2);
  }

  .btn--ghost:hover:not(:disabled) {
    background-color: var(--surface-tertiary);
  }

  .btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
  }

  .btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
  }

  .btn--block {
    width: 100%;
    justify-content: center;
  }

  /* Select */
  select.form-group__input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23868e96' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
  }

  /* Checkbox and radio */
  .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .form-check__input {
    width: auto;
    accent-color: var(--accent-primary);
  }

  .form-check__label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: 0;
  }

  /* Password visibility toggle — wrapper ajoute par password-toggle.js autour du seul input. */
  .form-group__password-wrapper {
    position: relative;
  }

  .form-group__password-wrapper > .form-group__input {
    padding-right: var(--space-8);
  }

  .form-group__toggle-password {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
  }

  /* Variant `.form-group--password` : applique le wrapper position:relative
     directement sur la `.form-group`, pour les formulaires qui n'ont pas
     besoin du wrapper supplémentaire posé par password-toggle.js. */
  .form-group--password {
    position: relative;
  }

  .form-group--password > .form-group__input {
    padding-right: var(--space-8);
  }

  /* Bouton "warning" — pour actions à risque modéré (suspendre, désactiver
     temporairement). Distinct de `.btn--danger` qui est destiné à la
     suppression définitive. */
  .btn--warning {
    background-color: var(--status-warning-text);
    color: var(--color-neutral-0);
  }

  .btn--warning:hover:not(:disabled) {
    background-color: var(--color-warning-700);
  }

  /* Compteur d'éléments dans une pagination (ex. "120 résultats") */
  .pagination-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 var(--space-3);
  }
}