/* ==========================================================================
   Boutons, angles francs, un seul aplat orange sur la page
   ========================================================================== */

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-label);
  font-size: 0.78rem;
  /* Le blanc sur l'orange de la charte ne tient que 4,7:1, contre 9,3:1 sur le
     vert. À cette réserve près, le trait doit être épais pour se lire. */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.button-primary {
  background: var(--green-dark);
  color: var(--white);
}

/* Le survol fonce, il ne s'éclaircit pas : sur une section verte un bouton qui
   s'éclaircit paraît s'éteindre. */
.button-primary:hover {
  background: #0d4531;
}

/* Partout la taille compacte de l'en-tête : c'est le même geste, il n'a pas à
   grossir parce qu'il est dans une page. Une grande surface d'orange délave le
   blanc, qui n'y tient que 4,7:1. */
.button-doctolib {
  min-height: 42px;
  padding: 0 16px;
  background: var(--accent-strong);
  color: var(--white);
  font-size: 0.7rem;
}

.button-doctolib:hover {
  background: #a4491a;
}

.button-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.button-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.button-ghost {
  border-color: var(--control-line);
  color: var(--green-dark);
}

.button-ghost:hover {
  border-color: var(--green-dark);
  background: var(--surface-hover);
}

.button-small {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.7rem;
}