/* VARIABLES & BASE */
:root {
    --amulBlue: #006091;
    --amulOrange: #F58220;
    --amulCyan: #00A8C5;
    --amulBeige: #fdfcf7;
    --amulDark: #1a1a1a;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: var(--amulBeige);
    overflow-x: hidden;
}

/* Empêcher la navbar de cacher les titres des sections */
section[id] {
    scroll-margin-top: 80px;
}

/* NÉO-BRUTALISME : BORDURES ET OMBRES */
.retro-border {
    border: 3px solid var(--amulDark);
    box-shadow: 4px 4px 0px 0px var(--amulDark);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.2s ease;
    will-change: transform, box-shadow;
}

.retro-border:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0px 0px var(--amulDark);
}

.retro-border:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px 0px var(--amulDark) !important;
}


.saas-card {
    /* On définit la transition ici pour qu'elle s'applique à l'aller ET au retour */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    will-change: transform, box-shadow;
    position: relative;
    z-index: 1;
}

.saas-card:hover {
    /* Le décalage vers le haut et la gauche */
    transform: translate(-8px, -8px) !important;
    z-index: 10;
    /* Ombre par défaut si pas de classe de couleur */
    box-shadow: 12px 12px 0px 0px var(--amulDark) !important;
}

/* Variantes de couleurs précises pour les ombres au survol */
.saas-card.border-amulBlue:hover {
    box-shadow: 12px 12px 0px 0px var(--amulBlue) !important;
}

.saas-card.border-amulOrange:hover {
    box-shadow: 12px 12px 0px 0px var(--amulOrange) !important;
}

.saas-card.border-amulCyan:hover {
    box-shadow: 12px 12px 0px 0px var(--amulCyan) !important;
}

/* Effet d'enfoncement au clic */
.saas-card:active,
.saas-card.border-amulBlue:active,
.saas-card.border-amulOrange:active,
.saas-card.border-amulCyan:active {
    transform: translate(2px, 2px) !important;
    /* On descend pour rejoindre la position de l'ombre */
    box-shadow: 0px 0px 0px 0px var(--amulDark) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}


/* ANIMATION GRADIENT INFINI */
.infinite-gradient {
    background: linear-gradient(to right, var(--amulBlue), var(--amulOrange), var(--amulCyan), var(--amulOrange), var(--amulBlue));
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: infiniteFlow 6s linear infinite;
}

@keyframes infiniteFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 400% 50%;
    }
}

/* ANIMATION FLOTTEMENT (MOCKUP) */
.float-anim {
    animation: floating 4s ease-in-out infinite;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}

/* BOUTONS VIBRANTS */
.btn-shake:hover {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: rotate(0deg) translate(-3px, -3px);
    }

    25% {
        transform: rotate(1deg) translate(-3px, -3px);
    }

    75% {
        transform: rotate(-1deg) translate(-3px, -3px);
    }
}

/* AUTO-SCROLL INTERNE (MOCKUP) */
.scroll-container-inner {
    animation: autoScrollContent 15s linear infinite;
}

@keyframes autoScrollContent {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.bg-amulDark:hover .scroll-container-inner {
    animation-play-state: paused;
}

/* MENU MOBILE */
.no-scroll {
    overflow: hidden;
}

#mobile-menu {
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

body {
    background-image: radial-gradient(#1a1a1a30 1px, transparent 1px);
    background-size: 30px 30px;
    background-color: var(--amulBeige);
}

/* section partenaires */

.project-card-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

.project-card-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-card-exit {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.3s ease-in;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}