/* ============================================
   PIBTS VARIABLES - v2.0.0
   ============================================ */

:root {
    /* ==========================================
       COULEURS PRINCIPALES
       ========================================== */
    --pibts-orange: #FC6C0F;
    --pibts-orange-dark: #d85a00;
    --pibts-orange-light: rgba(252, 108, 15, 0.08);
    --pibts-orange-soft: rgba(252, 108, 15, 0.15);
    --pibts-blue: #292874;
    --pibts-blue-dark: #1e1d56;
    --pibts-blue-light: rgba(41, 40, 116, 0.08);
    
    /* ==========================================
       DÉGRADÉS
       ========================================== */
    --pibts-gradient: linear-gradient(135deg, #FC6C0F 0%, #292874 100%);
    --pibts-gradient-reverse: linear-gradient(135deg, #292874 0%, #FC6C0F 100%);
    --pibts-gradient-hover: linear-gradient(135deg, #FF7A2F 0%, #3A3984 100%);
    
    /* ==========================================
       LAYOUT
       ========================================== */
    --sidebar-width: 280px;
    --sidebar-collapsed: 70px;
    --header-height: 72px;
    --footer-height: 60px;
    
    /* ==========================================
       OMBRES
       ========================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.12);
    
    /* ==========================================
       RAYONS
       ========================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* ==========================================
       TRANSITIONS
       ========================================== */
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ==========================================
       TYPOGRAPHIE
       ========================================== */
    --font-family: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-monospace: 'SF Mono', 'Fira Code', monospace;
}

/* ============================================
   CLASSES UTILITAIRES PIBTS
   ============================================ */

/* --- Couleurs --- */
.text-pibts { color: var(--pibts-orange) !important; }
.text-pibts-dark { color: var(--pibts-orange-dark) !important; }
.text-pibts-blue { color: var(--pibts-blue) !important; }
.text-warning { color: #FFD700 !important; }
.text-white-75 { color: rgba(255,255,255,0.75) !important; }
.text-muted { color: #6c757d !important; }

/* --- Fonds --- */
.bg-pibts { background: var(--pibts-gradient) !important; }
.bg-pibts-reverse { background: var(--pibts-gradient-reverse) !important; }
.bg-pibts-soft { background: var(--pibts-orange-light) !important; }
.bg-pibts-blue-soft { background: var(--pibts-blue-light) !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-white { background-color: #fff !important; }
.bg-dark { background-color: #1a1a2e !important; }

/* --- Bordures --- */
.border-pibts { border-color: var(--pibts-orange) !important; }
.border-pibts-soft { border-color: var(--pibts-orange-light) !important; }

/* --- Ombres --- */
.shadow-pibts { box-shadow: 0 8px 25px rgba(252, 108, 15, 0.15) !important; }
.shadow-pibts-lg { box-shadow: 0 12px 40px rgba(252, 108, 15, 0.2) !important; }

/* --- Badges --- */
.badge-pibts {
    background: var(--pibts-gradient) !important;
    color: #fff !important;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.badge-pibts-soft {
    background: var(--pibts-orange-light) !important;
    color: var(--pibts-orange) !important;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* --- Typographie --- */
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fs-5 { font-size: 1.25rem !important; }

/* --- Spacing --- */
.py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-8 { padding-top: 5rem; padding-bottom: 5rem; }
.py-10 { padding-top: 6rem; padding-bottom: 6rem; }
.max-w-600 { max-width: 600px; }

/* --- Position --- */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.top-0 { top: 0; }
.end-0 { right: 0; }
.w-50 { width: 50%; }
.h-100 { height: 100%; }
.z-1 { z-index: 1; position: relative; }
.opacity-10 { opacity: 0.1; }

/* --- Buttons --- */
.btn-outline-light {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.btn-light {
    background: #fff;
    color: #1a1a2e;
    border: none;
    transition: all 0.3s ease;
}
.btn-light:hover {
    background: #f8f9fa;
    color: var(--pibts-orange);
}
.btn-lg {
    padding: 0.8rem 2rem;
    font-size: 1.05rem;
}
.rounded-pill {
    border-radius: 9999px !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

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

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-in {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.animate-in-delay-1 { animation-delay: 0.05s; }
.animate-in-delay-2 { animation-delay: 0.1s; }
.animate-in-delay-3 { animation-delay: 0.15s; }
.animate-in-delay-4 { animation-delay: 0.2s; }
.animate-in-delay-5 { animation-delay: 0.25s; }

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 992px) {
    :root {
        --sidebar-width: 0px;
    }
}

@media (max-width: 576px) {
    .stat-card .stat-number {
        font-size: 1.5rem;
    }
}