/* Styles Globaux & Utilitaires */
body {
    background-color: #F9F7F2;
    color: #1A1A1A;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
}

/* Scrollbar Personnalisée */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #F9F7F2;
}
::-webkit-scrollbar-thumb {
    background: #1A1A1A;
}
::-webkit-scrollbar-thumb:hover {
    background: #E63946;
}

/* Classes d'animation utilitaires */
.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Effet de soulignement élégant pour les liens */
.underline-elegant {
    position: relative;
    display: inline-block;
}
.underline-elegant::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.underline-elegant:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Shadow DOM Reset (pour les composants) */
:host {
    all: initial;
    font-family: 'Inter', sans-serif;
}