/* --- CONFIGURATION DE BASE --- */
html.dark {
    color-scheme: dark;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: background-color 0.8s ease;
}

/* --- FOND ANIMÉ ORGANIQUE --- */
.ambient-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    /* Flou extrême pour fondre les couleurs */
    z-index: -1;
    opacity: 0.6;
    transition: background-color 0.8s ease;
}

/* Mode Clair : Identité "Vitalité du Quotidien" (Menthe, Jaune, Ciel) */
.blob-1-light {
    background-color: rgba(167, 243, 208, 0.5);
    /* Vert Menthe doux */
}

.blob-2-light {
    background-color: rgba(253, 224, 71, 0.4);
    /* Jaune Solaire / Énergie */
}

.blob-3-light {
    background-color: rgba(186, 230, 253, 0.4);
    /* Bleu Ciel très léger */
}

/* Mode Sombre : Forêt de Nuit (Émeraude, Or doux, Menthe) */
html.dark .blob-1-light {
    background-color: rgba(5, 150, 105, 0.35);
    /* Vert Émeraude */
}

html.dark .blob-2-light {
    background-color: rgba(217, 119, 6, 0.20);
    /* Or doux (Opacité faible pour éviter les mauvais mélanges) */
}

html.dark .blob-3-light {
    background-color: rgba(45, 212, 191, 0.30);
    /* Menthe */
}

/* Respirations Lentes */
@keyframes float-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(10vw, 5vh) scale(1.2);
    }
}

@keyframes float-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1.2);
    }

    50% {
        transform: translate(-10vw, 10vh) scale(0.9);
    }
}

@keyframes float-3 {

    0%,
    100% {
        transform: translate(0, 0) scale(0.9);
    }

    50% {
        transform: translate(5vw, -10vh) scale(1.1);
    }
}

.animate-random-1 {
    animation: float-1 20s ease-in-out infinite;
}

.animate-random-2 {
    animation: float-2 25s ease-in-out infinite reverse;
}

.animate-random-3 {
    animation: float-3 18s ease-in-out infinite;
}

/* --- ANIMATION LOGO & UTILITAIRES --- */
@keyframes gentle-float {

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

    50% {
        transform: translateY(-8px);
    }
}

.logo-animate {
    animation: gentle-float 4s ease-in-out infinite;
}

/* Cacher flèches input number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* --- 3D STATIQUE & CONTRE-BRAQUAGE --- */

@keyframes shine-sweep {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    20%,
    100% {
        transform: translateX(250%) skewX(-20deg);
    }

    /* Pause entre les reflets */
}

.glass-shine-effect-global {
    position: relative;
    overflow: hidden;
    /* Empêche le reflet de dépasser des bords arrondis de la carte */
}

/* Accélération du reflet lumineux */
.glass-shine-effect-global::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shine-sweep 15s ease-in-out infinite;
    /* Ralenti de 4.5s à 8s */
    z-index: 50;
    pointer-events: none;
}

.font-signature {
    font-family: 'Dancing Script', cursive;
}

/* --- ANIMATION RESPIRATION SCAN (INTENSIFIÉE) --- */
@keyframes scan-breathe {

    0%,
    100% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    }

    /* Halo plus grand (40px) et plus opaque (0.8) */
    50% {
        box-shadow: 0 0 40px 8px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
    }
}

@keyframes scan-breathe-dark {

    0%,
    100% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    /* Halo adapté pour bien ressortir dans le noir */
    50% {
        box-shadow: 0 0 45px 8px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    }
}

.animate-scan-breathe {
    animation: scan-breathe 4s ease-in-out infinite;
}

html.dark .animate-scan-breathe {
    animation: scan-breathe-dark 4s ease-in-out infinite;
}