/* Django Hub - Styles Modernisés (v2.2 - Dark Mode Ready) */

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    /* Suppression de --light-bg hardcodé pour laisser Bootstrap gérer */
    --card-border-radius: 16px;
    --transition-speed: 0.3s;
}

/* === Global === */
body {
    /* Background géré par Bootstrap (bg-body) */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* === Navbar === */
.navbar {
    backdrop-filter: blur(10px);
    /* Utilisation de la variable Bootstrap pour le fond avec transparence */
    background-color: rgba(var(--bs-body-bg-rgb), 0.9) !important; 
    position: relative;
    z-index: 1030;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* === Animations === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* === Cards & Interactions === */
.card {
    border-radius: var(--card-border-radius);
    overflow: hidden;
    /* Background géré par Bootstrap (.card a déjà un bg sémantique) */
}

.hover-lift {
    transition: transform var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-6px);
    /* Ombre plus subtile en dark mode à gérer si besoin, mais le défaut est ok */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

/* App Card Specifics */
.card-link-wrapper {
    color: inherit;
    display: block;
    text-decoration: none; /* Ajout explicite */
}

.card-link-wrapper:hover {
    color: inherit;
}

.app-unavailable {
    opacity: 0.7;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.app-unavailable:hover {
    transform: none !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

/* === Utility === */
/* Utilisation de bg-primary-subtle de Bootstrap au lieu de hardcoder */
.bg-primary-subtle {
    /* La classe existe déjà dans Bootstrap 5.3, on peut surcharger si besoin mais l'originale est adaptative */
}

/* Surcharge uniquement si nécessaire pour le contraste */
.text-primary-emphasis {
   /* Laisser Bootstrap gérer */
}

.icon-wrapper-lg {
    width: 64px;
    height: 64px;
}

/* Footer */
.footer {
    /* Background et bordure gérés par classes utilitaires dans HTML (bg-body-tertiary) */
}

/* === Mobile Bottom Nav === */
/* Note: Bootstrap 'd-md-none' hides this on screens >= 768px */
@media (max-width: 767.98px) {
    body {
        padding-bottom: 80px; /* Espace augmenté pour la navbar */
    }

    .mobile-bottom-nav {
        position: fixed !important; /* Force fixed positioning */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-top: 1px solid var(--bs-border-color); /* Bordure adaptative */
        padding-bottom: env(safe-area-inset-bottom);
        height: auto;
        min-height: 60px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08); /* Ombre plus prononcée vers le haut */
        z-index: 1050 !important; /* Force au-dessus du reste */
        background-color: rgba(var(--bs-body-bg-rgb), 0.95) !important; /* Fond adaptatif */
        backdrop-filter: blur(10px);
    }

    .mobile-bottom-nav .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem; /* Slightly larger text */
        color: var(--secondary-color);
        padding: 0.75rem 0; /* Increased padding for better touch target (min 44px height) */
        transition: color 0.2s;
        width: 100%;
        text-align: center;
        min-height: 56px; /* Ensuring minimum height for touch target */
    }

    .mobile-bottom-nav .nav-link i {
        font-size: 1.4rem; /* Icones légèrement plus grandes */
        margin-bottom: 4px;
        display: block;
    }

    .mobile-bottom-nav .nav-link.active {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    .mobile-bottom-nav .nav-item {
        flex: 1;
        display: flex;
        justify-content: center;
    }
}