/**
 * Le Tour de Moi - Component: Button
 * Un composant bouton générique, robuste et premium.
 */

.btn {
    /* Variables locales par défaut */
    --btn-height: 40px;
    --btn-padding: var(--space-lg);
    --btn-fs: var(--fs-sm);
    --btn-bg: transparent;
    --btn-color: var(--clr-text-main);
    --btn-border: transparent;
    --btn-hover-bg: transparent;
    --btn-hover-color: var(--btn-color);
    --btn-hover-border: transparent;
    --btn-shadow: none;
    --btn-active-scale: 0.97;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    
    height: var(--btn-height);
    padding: 0 var(--btn-padding);
    
    font-family: var(--font-main);
    font-size: var(--btn-fs);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    
    cursor: pointer;
    border: var(--border-width) solid var(--btn-border);
    border-radius: 6px;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    box-shadow: var(--btn-shadow);
    
    transition: 
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        filter var(--transition-fast);
    
    white-space: nowrap;
    user-select: none;
    outline: none;
    letter-spacing: 0.02em;
}

/* --- ÉTATS GLOBAUX --- */

.btn:hover:not(:disabled) {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border);
    box-shadow: var(--btn-hover-shadow, 0 4px 12px rgba(0,0,0,0.1));
}

.btn:active:not(:disabled) {
    transform: scale(var(--btn-active-scale));
    filter: brightness(0.95);
}

.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--clr-bg-main), 0 0 0 4px var(--clr-primary);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

/* --- TAILLES --- */

.btn--sm {
    --btn-height: 32px;
    --btn-padding: var(--space-sm);
    --btn-fs: var(--fs-xs);
}

.btn--md {
    --btn-height: 40px;
    --btn-padding: var(--space-md);
    --btn-fs: var(--fs-sm);
}

.btn--lg {
    --btn-height: 48px;
    --btn-padding: var(--space-xl);
    --btn-fs: var(--fs-base);
}

/* --- VARIANTES --- */

/* Primary */
.btn--primary {
    --btn-bg: var(--clr-primary);
    --btn-color: var(--clr-text-light);
    --btn-border: var(--clr-primary);
    --btn-hover-bg: #D87A2A;
    --btn-hover-border: #D87A2A;
    --btn-hover-shadow: 0 8px 20px rgba(198, 106, 26, 0.3);
}

/* Secondary */
.btn--secondary {
    --btn-bg: var(--clr-secondary);
    --btn-color: var(--clr-text-light);
    --btn-border: var(--clr-secondary);
    --btn-hover-bg: #326E8D; /* Légèrement plus clair */
    --btn-hover-border: #326E8D;
}

/* Outline */
.btn--outline {
    --btn-bg: transparent;
    --btn-color: var(--clr-text-main);
    --btn-border: var(--clr-border-dark);
    --btn-hover-bg: var(--clr-bg-main);
    --btn-hover-border: var(--clr-text-main);
}

/* Ghost */
.btn--ghost {
    --btn-bg: transparent;
    --btn-color: var(--clr-text-secondary);
    --btn-hover-bg: var(--clr-border);
    --btn-hover-color: var(--clr-text-main);
}

/* Success */
.btn--success {
    --btn-bg: var(--clr-success);
    --btn-color: var(--clr-text-light);
    --btn-border: var(--clr-success);
    --btn-hover-bg: #4A6C51;
    --btn-hover-border: #4A6C51;
}

/* Danger */
.btn--danger {
    --btn-bg: var(--clr-danger);
    --btn-color: var(--clr-text-light);
    --btn-border: var(--clr-danger);
    --btn-hover-bg: #C0392B;
    --btn-hover-border: #C0392B;
}

/* --- OPTIONS --- */

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

/* Icônes */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn--sm .btn-icon { font-size: 14px; }
.btn--md .btn-icon { font-size: 16px; }
.btn--lg .btn-icon { font-size: 20px; }