/* Base global styling et utilitaires d'animation */

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #FDFBF7; /* cream */
}

::-webkit-scrollbar-thumb {
    background: #a9beae; /* sage-light */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #849c8a; /* sage */
}

/* 
  Micro-animations (Intersection Observer)
  Nous appliquons class="animate-on-scroll" sur les éléments à animer.
  L'état initial est l'opacité 0, et l'élément est décalé.
*/

.animate-on-scroll {
    opacity: 0;
    will-change: transform, opacity;
}

.slide-up {
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in {
    transform: scale(0.98);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* État 'is-visible' ajouté via JS */
.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Smooth anchor scrolling adjustments */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* offset for sticky navbar */
}