/* Import des icônes et de la police */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

/* Règles globales */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Animation douce pour l'apparition des pages */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

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

/* Désactiver l'animation d'apparition pour le header et le footer
   (y compris les placeholders où le header/footer sont injectés) */
.fade-in header,
.fade-in footer,
.fade-in nav,
.fade-in #header-placeholder,
.fade-in #footer-placeholder {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Carousel styles (moved from index.html) */
.zoomable { cursor: zoom-in; }

.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 2rem 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.carousel-item {
    flex: 0 0 auto;
    width: 280px;
}

/* Responsive tweak: reduce item width on small screens */
@media (max-width: 640px) {
    .carousel-item { width: 220px; }
}