@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    .glass {
        background: rgba(17, 24, 39, 0.5);
    }
}

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

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

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

.ant-steps-item-active .ant-steps-item-title {
    font-weight: 600 !important; /* bold */
    color: #f7762a !important;
}

.fs-animated-gradient {
    position: fixed;
    inset: 0;
    z-index: -20;
    pointer-events: none;
}

.fs-stars {
    position: fixed;
    inset: 0;
    z-index: -10;
    /* sous l’UI, au-dessus du gradient */
    pointer-events: none;
    transform: translateZ(0);
    /* force layer GPU */
    will-change: transform;
}

/* Vrai "glass" : fond semi-transparent + blur */
.glass {
    backdrop-filter: saturate(160%) blur(4px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    background: rgba(255, 255, 255, 0.18);
    /* important : pas opaque */
    border: 1px solid rgba(255, 255, 255, 0.35);
}

html.dark .glass {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Fallback si le navigateur ne supporte pas backdrop-filter */
@supports not (
    (
        backdrop-filter: blur(1px),
    )
) {
    .glass {
        background: rgba(255, 255, 255, 0.85);
    }

    html.dark .glass {
        background: rgba(17, 24, 39, 0.85);
    }
}

/* BACKGROUND global, plein écran, derrière l'UI */
/* .fs-animated-gradient {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: 300% 300%;
    animation: fsGradientShift 18s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
    will-change: background-position;
    filter: saturate(1.05);
} */
/* ==> plus de :root.dark ici : les variantes suivent la classe choisie en JSX */
.fs-animated-gradient--light {
    background-image: radial-gradient(
            60% 60% at 20% 10%,
            rgba(14, 165, 233, 0.25),
            transparent 60%
        ),
        radial-gradient(
            50% 50% at 80% 0%,
            rgba(99, 102, 241, 0.2),
            transparent 60%
        ),
        linear-gradient(180deg, #ffffff 0%, #f2f4f8 60%, #eef2f7 100%);
}

.fs-animated-gradient--dark {
    background-image: radial-gradient(
            60% 60% at 20% 10%,
            rgba(56, 189, 248, 0.2),
            transparent 60%
        ),
        radial-gradient(
            50% 50% at 80% 0%,
            rgba(129, 140, 248, 0.18),
            transparent 60%
        ),
        linear-gradient(180deg, #0b1020 0%, #0a0f1a 55%, #080d16 100%);
}

/* Canvas étoiles — fixed plein écran */
/* .fs-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
} */