@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

html,
body {
    transition: background 0.4s, color 0.4s;
}

/* ── Sticky footer layout ────────────────────────────
   Classes Tailwind absentes de output.css car ajoutées
   après la compilation. On les définit ici.           */
.min-h-screen {
    min-height: 100vh;
}

.min-h-full {
    min-height: 100%;
}

.mt-auto {
    margin-top: auto;
}

/* Loading screen */
#loading {
    transition: opacity 0.4s ease;
    z-index: 9999;
}

#loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Footer */
footer[role="contentinfo"] {
    padding-bottom: 2rem;
}

/* ── Technology badges (project cards) ───────────────
   Colors injected via CSS custom properties from DB.  */
.tech-badge {
    background-color: var(--color-light, #e5e7eb);
    color: #1f2937;
}

.dark .tech-badge {
    background-color: var(--color-dark, #4b5563);
    color: #ffffff;
}

/* Navigation desktop active */
#main-nav .nav-link.active {
    color: black;
    font-weight: 600;
    font-size: 1.05rem;
}

/* Mode sombre */
.dark #main-nav .nav-link.active {
    color: white;
    font-weight: 600;
    font-size: 1.05rem;
}

#mobile-menu {
    box-shadow: 0 8px 32px rgba(93, 92, 222, 0.12);
}

#mobile-menu-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Responsive boutons actions */
.experiences-actions {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

@media (max-width: 640px) {
    .experiences-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .experiences-actions button,
    .experiences-actions a {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    #mobile-menu .aside-nav-btn.active {
        background-color: #d1d5db;
        border-radius: 0.5rem;
    }

    .dark #mobile-menu .aside-nav-btn.active {
        background-color: #1f2937;
    }
}

/* HTMX : transition douce entre les pages */
#main-content {
    transition: opacity 0.2s ease;
}

.htmx-swapping #main-content {
    opacity: 0;
}

.dark #mobile-bottom-nav .mobile-nav-btn.active .mobile-nav-icon,
.dark #mobile-bottom-nav .mobile-nav-btn.active .mobile-nav-label {
    color: #a5b4fc;
}