/* ==========================================================
   Composants : boutons, champs, cartes, alertes, badges, modales
   ========================================================== */

/* ----- Boutons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.18);
}
.btn-primary:hover:not([disabled]) { background: var(--color-accent-dark); color: var(--color-text-on-accent); }

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover:not([disabled]) {
    background: var(--color-surface-alt);
    border-color: var(--color-text-soft);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
}
.btn-ghost:hover:not([disabled]) {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-danger:hover:not([disabled]) { background: #DC2626; color: #fff; }

.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }

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

/* ----- Inputs ----- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.field-help {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.field-error {
    font-size: var(--fs-xs);
    color: var(--color-danger);
}

.input,
.select,
.textarea {
    width: 100%;
    height: 42px;
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default),
                background-color var(--duration-fast) var(--ease-default);
}

.input::placeholder, .textarea::placeholder { color: var(--color-text-soft); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-soft); }

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.textarea {
    height: auto;
    min-height: 96px;
    padding: var(--space-3);
    resize: vertical;
    line-height: var(--lh-normal);
}

.input[disabled], .select[disabled], .textarea[disabled] {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.input-with-icon {
    position: relative;
}
.input-with-icon .input { padding-left: 42px; }
.input-with-icon .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-soft);
    pointer-events: none;
}

/* Checkbox / Radio */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--fs-sm);
}

.checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ----- Cartes ----- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-normal) var(--ease-default),
                border-color var(--duration-normal) var(--ease-default);
}

.card:hover { border-color: var(--color-border-soft); }

.card-body { padding: var(--space-6); }
.card-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-footer {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border);
}
.card-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0;
}

/* ----- Alertes / Flash ----- */
.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.alert-info    { background: var(--color-info-soft);    color: #075985; border-color: #BAE6FD; }
.alert-success { background: var(--color-success-soft); color: #14532D; border-color: #86EFAC; }
.alert-warning { background: var(--color-warning-soft); color: #78350F; border-color: #FDE68A; }
.alert-error   { background: var(--color-danger-soft);  color: #7F1D1D; border-color: #FCA5A5; }

/* ----- Badges ----- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border: 1px solid var(--color-border);
}

.badge-accent  { background: var(--color-accent-soft); color: var(--color-accent-darker); border-color: var(--color-accent-bord); }
.badge-success { background: var(--color-success-soft); color: #166534; border-color: #86EFAC; }
.badge-warning { background: var(--color-warning-soft); color: #92400E; border-color: #FDE68A; }
.badge-danger  { background: var(--color-danger-soft); color: #991B1B; border-color: #FCA5A5; }
.badge-info    { background: var(--color-info-soft); color: #075985; border-color: #BAE6FD; }

/* ----- Toast ----- */
.toast-stack {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: var(--z-toast);
    max-width: 400px;
}

.toast {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    animation: toast-in var(--duration-normal) var(--ease-out);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Divider ----- */
.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-soft);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}