/* ============================================================
 * Boutons — primary (ink), secondary (violet), tertiary (cyan)
 * Min 44px hauteur (touch target iOS / accessibility WCAG).
 * ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: transform 80ms, background 120ms, border-color 120ms, color 120ms;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover {
    background: color-mix(in srgb, var(--ink) 88%, var(--violet));
    border-color: color-mix(in srgb, var(--ink) 88%, var(--violet));
    text-decoration: none;
    color: var(--bg);
}
.btn:active {
    transform: scale(0.98);
}

.btn--full { width: 100%; }

.btn--secondary {
    background: var(--bg-paper);
    color: var(--ink);
    border-color: transparent;
}
.btn--secondary:hover {
    background: var(--violet-soft);
    border-color: transparent;
    color: var(--ink);
}

.btn--tertiary {
    background: var(--bg-paper);
    color: var(--ink);
    border-color: transparent;
}
.btn--tertiary:hover {
    background: var(--cyan-soft);
    border-color: transparent;
    color: var(--ink);
}

.btn--compact {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Icônes de boutons : couleur sémantique. Chaque teinte garde son rôle :
   orange = qualité, violet = action, cyan = positif/nouveau. */
.btn__icon--orange { color: var(--orange); }
.btn__icon--violet { color: var(--violet); }
.btn__icon--cyan   { color: var(--cyan); }