/* Google Sans Flex (Variable) */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex-VariableFont_GRAD,ROND,opsz,slnt,wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Vous pouvez aussi cibler spécifiquement les fichiers statiques si besoin */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex_24pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex_9pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Jockey One */
@font-face {
    font-family: 'Jockey One';
    src: url('../fonts/JockeyOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
    scroll-margin-top: 90px;
}

body {
    background-color: #1F1F21;
    font-family: "Google Sans Flex", sans-serif;
}

h1, h2 {
    font-family: "Jockey One", sans-serif;
}

/* hero section */

/* Ombre portée subtile derrière l'image */
.img-shadow {
    filter: drop-shadow(0px 0px 20px rgba(168, 85, 247, 0.4));
    transition: filter 0.5s ease;
}

.group:hover .img-shadow {
    filter: drop-shadow(0px 0px 40px rgba(168, 85, 247, 0.7));
}

/* Animation du pulse lumineux */
.hero-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
        filter: blur(80px);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
        filter: blur(120px);
    }
}

.card-pro {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
}
.card-pro:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(168, 85, 247, 0.5);
    transform: translateY(-5px);
}