/**
 * Buttons Global — d314.io
 * Design System V5
 *
 * Chargé sur toutes les pages.
 * Dépend de : variables.css (tokens V5)
 *
 * Classes disponibles :
 *   .btn                         Base
 *   .btn-primary / secondary / ghost / cta
 *   .btn-success / danger / warning / info
 *   .btn-sm / md / lg / xl       Tailles
 *   .btn-full                    Pleine largeur
 *   .btn:disabled / .btn.loading États
 */

/* ── BASE ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xxl);
    min-height: 44px;
    min-width: 44px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: all var(--transition-normal);
}

.btn:hover  { transform: translateY(-2px); transition: all var(--transition-fast); }
.btn:active { transform: translateY(0);    transition: all var(--transition-fast); }
.btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* ── VARIANTES ── */

.btn-primary {
    background: var(--primary-gradient);
    color: var(--text-primary);
    border: 1px solid var(--primary-border);
    box-shadow: var(--shadow-primary);
}
.btn-primary:hover  { filter: brightness(1.12); box-shadow: 0 8px 28px var(--primary-light); }
.btn-primary:active { filter: brightness(0.9); }

.btn-secondary {
    background: var(--primary-light);
    color: var(--primary-color);
    border: 1px solid var(--primary-border);
}
.btn-secondary:hover  { background: var(--primary-border); box-shadow: var(--shadow-primary); }
.btn-secondary:active { background: var(--primary-light); }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}
.btn-ghost:hover  { background: var(--surface-glass); color: var(--text-primary); border-color: var(--border-medium); }
.btn-ghost:active { background: var(--surface-glass-hover); }

.btn-cta {
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: var(--font-weight-bold);
    border: none;
}
.btn-cta:hover  { filter: brightness(0.92); box-shadow: var(--shadow-lg); }
.btn-cta:active { filter: brightness(0.85); }

.btn-success {
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-border);
}
.btn-success:hover { background: var(--success-border); box-shadow: 0 5px 15px var(--success-bg); }

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-border);
}
.btn-danger:hover { background: var(--danger-border); box-shadow: 0 5px 15px var(--danger-bg); }

.btn-warning {
    background: var(--warning-bg);
    color: var(--warning-color);
    border: 1px solid var(--warning-border);
}
.btn-warning:hover { background: var(--warning-border); box-shadow: 0 5px 15px var(--warning-bg); }

.btn-info {
    background: var(--info-bg);
    color: var(--info-color);
    border: 1px solid var(--info-border);
}
.btn-info:hover { background: var(--info-border); box-shadow: 0 5px 15px var(--info-bg); }

/* ── TAILLES ── */

.btn-sm { padding: var(--spacing-sm) var(--spacing-lg);    font-size: var(--font-size-md); min-height: 36px; min-width: 36px; border-radius: 6px; }
.btn-md { padding: var(--spacing-md) var(--spacing-xxl);   font-size: var(--font-size-lg); min-height: 44px; min-width: 44px; }
.btn-lg { padding: var(--spacing-lg) var(--spacing-xxxl);  font-size: var(--font-size-xl); min-height: 52px; min-width: 52px; border-radius: var(--radius-lg); }
.btn-xl { padding: var(--spacing-xl) var(--spacing-xxxxl); font-size: var(--font-size-xxl); min-height: 60px; min-width: 60px; border-radius: var(--radius-xl); }

/* ── ÉTATS ── */

.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn.loading {
    color: transparent;
    pointer-events: none;
}
.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    opacity: 0.7;
}
@keyframes btn-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── UTILITAIRES ── */

.btn-full { width: 100%; }
.btn + .btn { margin-left: var(--spacing-sm); }

/* ── RESPONSIVE ── */

@media (max-width: 768px) {
    .btn    { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-md); min-height: 40px; }
    .btn-sm { padding: 6px var(--spacing-md); font-size: var(--font-size-sm); min-height: 32px; }
    .btn-lg { padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-lg); min-height: 48px; }
}

@media (max-width: 480px) {
    .btn { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); min-height: 36px; }
}

/* ── ACCESSIBILITÉ ── */

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none; }
    .btn.loading::after { animation: none; }
}