/* ========================================
   VARIABLES CSS - CHARTE GRAPHIQUE
   ======================================== */
:root {
    --primary: #2a3f54;
    --primary-hover: #1a2b3c;
    --secondary: #264653;
    --accent: #38b2ac;
    --background: #f7f7f7;
    --white: #ffffff;
    --background-dark: #1a202c;
    --bg-menu: #264653;
    --border-color: #dddddd;
    --active: #39687a;
    --error: #e76f51;
    --bg-cancel: #3a687b;
    --hr-color: #3a687b;
    --success: #155724;
    --warning: #856404;
    --info: #0c5460;
    --text-dark: #2d3748;

    /* Couleurs d'état */
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --warning-bg: #fff3cd;
    --warning-border: #ffeaa7;
    --error-bg: #f8d7da;
    --error-border: #f5c6cb;
    --info-bg: #d1ecf1;
    --info-border: #bee5eb;

    /* Tailles et espacements */
    --border-radius: 15px;
    --border-radius-small: 8px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Typographie */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* ========================================
   RESET ET BASE
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ========================================
   ANIMATIONS GLOBALES
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* ========================================
   CLASSES UTILITAIRES
   ======================================== */
.text-primary {
    color: var(--primary);
}
.text-secondary {
    color: var(--secondary);
}
.text-accent {
    color: var(--accent);
}
.text-error {
    color: var(--error);
}
.text-success {
    color: var(--success);
}
.text-warning {
    color: var(--warning);
}
.text-info {
    color: var(--info);
}

.bg-primary {
    background-color: var(--primary);
}
.bg-secondary {
    background-color: var(--secondary);
}
.bg-accent {
    background-color: var(--accent);
}
.bg-white {
    background-color: var(--white);
}
.bg-background {
    background-color: var(--background);
}

.border-radius {
    border-radius: var(--border-radius);
}
.border-radius-small {
    border-radius: var(--border-radius-small);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}
.shadow-md {
    box-shadow: var(--shadow-md);
}
.shadow-lg {
    box-shadow: var(--shadow-lg);
}
.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.transition-fast {
    transition: all var(--transition-fast);
}
.transition-normal {
    transition: all var(--transition-normal);
}
.transition-slow {
    transition: all var(--transition-slow);
}