/* ds › Bouton : valeurs de BASE et VARIANTES, sans en inventer. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible-min);
  padding: 0 var(--e-6);
  font-family: var(--f-texte);
  font-size: var(--t-small);
  font-weight: var(--g-fort);
  line-height: 1.35;
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color var(--m-normal) var(--m-courbe), color var(--m-normal) var(--m-courbe), border-color var(--m-normal) var(--m-courbe);
}
.bouton .bi { font-size: 16px; line-height: 1; }
.bouton--pleine-largeur { width: 100%; }

.bouton--primaire { background: var(--c-vert-700); color: var(--c-paper); border-color: var(--c-vert-700); }
.bouton--primaire:hover,
.bouton--primaire:active { background: var(--c-vert-900); color: var(--c-paper); border-color: var(--c-vert-900); }

.bouton--secondaire { background: transparent; color: var(--c-vert-700); border-color: var(--c-line-fort); }
.bouton--secondaire:hover { background: var(--c-vert-100); color: var(--c-vert-900); border-color: var(--c-vert-700); }
.bouton--secondaire:active { background: var(--c-vert-100); color: var(--c-vert-900); border-color: var(--c-vert-900); }

.bouton--tertiaire { background: transparent; color: var(--c-vert-500); padding: 0 var(--e-2); text-decoration: underline; text-underline-offset: 3px; }
.bouton--tertiaire:hover,
.bouton--tertiaire:active { color: var(--c-vert-900); }

.bouton--achat { background: var(--c-vert-900); color: var(--c-paper); border-color: var(--c-vert-900); }
.bouton--achat:hover,
.bouton--achat:active { background: var(--c-vert-700); color: var(--c-paper); border-color: var(--c-vert-700); }

/* Désactivé : jamais une simple opacité (readme § 4). */
.bouton:disabled {
  background: var(--c-paper-3);
  color: var(--c-ink-3);
  border-color: var(--c-line);
  cursor: not-allowed;
}