/* =========================================================
   DO TRAININGS — Boutons et liens
   Règle : un seul CTA principal fort par zone visible.
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  padding: 0.9375rem 1.625rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  border: 1.5px solid transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn__icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(2px); }

/* ---------- Primaire : vert profond ---------- */
.btn--primary {
  background-color: var(--color-green-deep);
  color: var(--color-white);
}

.btn--primary:hover { background-color: #2A3423; }

/* Sur fond vert profond, le primaire s'inverse */
.on-dark .btn--primary,
.btn--primary-inverse {
  background-color: var(--color-white);
  color: var(--color-green-deep);
}

.on-dark .btn--primary:hover,
.btn--primary-inverse:hover { background-color: var(--color-sand); }

/* ---------- Secondaire : contour encre ---------- */
.btn--secondary {
  background-color: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--secondary:hover {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

.on-dark .btn--secondary {
  border-color: var(--color-green-soft);
  color: var(--color-white);
}

.on-dark .btn--secondary:hover {
  background-color: var(--color-green-soft);
  color: var(--color-green-deep);
}

/* ---------- Accent doux : vert sauge ---------- */
.btn--accent {
  background-color: var(--color-green);
  color: var(--color-white);
}

.btn--accent:hover { background-color: #7C9270; }

/* ---------- Désactivé ---------- */
.btn--disabled,
.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--color-sand);
  border-color: transparent;
  color: var(--color-ink-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--disabled .btn__icon { transform: none; }

/* ---------- Pleine largeur (mobile, formulaires) ---------- */
.btn--block { width: 100%; }

@media (max-width: 479px) {
  .btn--block-mobile { width: 100%; }
}

/* ---------- Lien texte avec flèche ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-green);
  transition: color var(--duration-fast) var(--ease-out);
}

.link-arrow__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.link-arrow:hover { color: var(--color-green-deep); }
.link-arrow:hover .link-arrow__icon { transform: translateX(3px); }

.link-arrow--muted {
  color: var(--color-ink-muted);
  cursor: default;
  pointer-events: none;
}

/* ---------- Lien externe ---------- */
.link-external {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border);
}

.link-external:hover { text-decoration-color: currentColor; }